Voice Recorder Component

You’re the best Angus! I’ve tested in Safari and the upload portion works great, but unfortunately playback does not work. Not sure if these errors are related:

Hey David, no worries. Playback is definitely working in Safari. I’ve set up a demo for you on demo.pavilion.tech. Here’s a screencast of me using playback in Safari. You can’t hear the playback because of the way the screencast audio works, but believe me, it’s there :slight_smile: (and sorry for the background noise).

Try disabling other themes or plugins on your site to see if they’re breaking the javascript in Safari.

1 Like

Thanks Angus, seems to be isolated to this one post, hopefully just an isolated incident.

Playback is not working for me, when recording through Chrome (macOS) and attempted playback through Safari (macOS).

That’s probably the problem I described earlier, I assume, where browsers won’t support MediaRecorder API codecs in all variations across browsers.

Is this combination working for others? Recording via Chrome, playback in Safari?

I confirm this error on my Discourses @peter.be - here is a sample…

https://story.pub/t/voice-recorder-tc-chrome-on-macos/14

Recordings made in Chrome on MacOS:

(Same as my bug report from a few days ago, except this was recorded in Chrome on MacOS)

iMac Desktop (MacOS)

  • do play in Chrome on MacOS
  • do play in FireFox on MacOS

  • do not play in Safari on MacOS

iPhone, iPad (iOS)

  • do not play in Chrome on iOS
  • do not play in Safari on iOS
  • do not play in FireFox on iOS
  • do not play in Brave on iOS
    Tired Tv Land GIF by TV Land Classic
2 Likes

This is how I see the player at your link:

And this is from my forum:

iPad and mine works, but yours not. So I’m just wondering.

1 Like

@Jagster what OS and Browser did you use to record the clip on your site?

iPadOS 16.6 and Safari/DiscouseHub. But on iPad browsers are all same in that matter.

I can record in Chrome on my iPad. It won’t play and gives error in Chrome on the iPad.

The same recording will, however, play in Safari on my iPad and in Chrome on my Windows machine.

It also plays in Chrome, Safari and Firefox on my iMac/MacOS.

https://story.pub/t/voice-recorder-tc-chrome-on-ios/15

And yet I could play it on Chrome/iPad.

Since others are having issues too I’ll throw it out there that the post I was seeing issues with was created with an Android in MS Edge, the errors playing back in Safari on desktop.

@angus should we (for now) tag this as broken, and perhaps in the Topic Post refer to the currently working plugin Discourse Audio Message?

It’s not broken. It works exactly as it always has, even more so (it now also records in Safari). You’re asking me to extend the functionality, not fix it.

The issues you’re referring to are the playback of certain kinds of audio formats in the audio tag in Safari due to the way it is rendered in Discourse post HTML (@peter.be it’s not really about the cross browser compatibility of the MediaRecorder API).

If you uploaded certain audio formats without using a plugin or theme component, just as a file, you’d see the same behaviour in Safari. If you want to solve that very specific issue, you’ll need to either

  • look into the specific issue yourself and make a PR
  • hire someone to do it for you
  • raise a feature request to improve the format handling of audio tags in Discourse post HTML.
4 Likes

That’s the reason why I chose to convert recorded audio messages to the mp3 format - if you want to call it cross browser compatibility issues with the MediaRecorder API or some browsers not being able to play certain codecs; or if you call it ‘broken’ or not; bottom line, I needed a solution that supports playback in all browsers regardless in which browser the file was recorded in.

Since all browsers support mp3 playback, I chose this pathway.

I was just trying to point out the reason why certain use cases don’t work with the MediaRecorder API, and explained why and which solution I chose for the plugin.

I’ll leave it at that. If I get a chance at some point, I might take a closer look at the theme component, since I agree that it is a more convenient way to install and maintain it, but at the moment I won’t have the time to contribute unfortunately :pray:

2 Likes

Thank you @angus for your time spent on fixing the modal and improving this TC. :pray:

4 Likes

Can you update this theme component to work in chat? or is there any other plugin or theme component that allows recording audio file in chat?

3 Likes

That isn’t a bad suggestion. Would you mind explaining your use-case?

Also, contributions are super useful for things like this - either PRs or sponsoring the dev work needed.

This is what our users want. They wanted to record and send audio during the chat, just like WhatsApp.

Even though I don’t have a huge community, I might consider sponsorship for this development. The person who will do it can create a private topic with me.

5 Likes

It would be great if you could create a topic in marketplace for that. :+1:

4 Likes

I cannot make this component work on Debian/GNU/Linux with Firefox (Debian 12, Firefox 115.5.0esr). Did anyone else try this configuration?

Would a CSP issue with window.injectScript be blocking?