Voice Recorder Component

It looks like a safari issue. I’ll take a look at that shortly.

1 Like

Yeah, it’s a safari issue and it’s been there for a while (in fact this probably never worked on safari).

The component works in Chrome and Firefox, as it did before. I’ve further updated the component to use the native javascript MediaRecorder API (instead of a 5 year old npm library), however someone with some more time on their hands will need to get the native MediaRecorder API and audio element to play nicely with Safari. Happy to help with a PR for that specific task.

@peter.be @denvergeeks Perhaps you want to focus your efforts just on that. I’d be happy to make you maintainers of the repository.

6 Likes

Thank you, Angus, I won’t have the time to dive deeper into this as of now.

For what it’s worth - I’ve tried the MediaRecorder API initially when developing the plugin, but quickly came to find that there’s no way to support all browsers for recording and playback (there’s always a combination that doesn’t work) because of codec/format issues. I spent quite some time with this, but as far as I’m aware, there’s no way to support all browsers when using the MediaRecorder API. That’s why I used a mp3 encoder.

3 Likes

Thanks @peter.be and @angus! I have tested and found that this TC does now work, except:

  1. not in Safari on MacOS (although it does work in Chrome on MacOS)

  2. not in Safari or Chrome or Firefox or Brave on iOS

Here’s one possible solution…

3 Likes

@denvergeeks have you tested playback in the respective other browser(s)?

When I tested, recording worked, but especially when switching from Safari to Chrome and vice versa there were always playback issues. Specifically, if I remember correctly, files recorded through Chrome would not play back in Safari, no matter what codec I used.

But you said you tested this and it worked (with all combinations for recording and playback between different browsers)?

Yes @peter.be – I tested just now and found that…

Recordings made in Chrome on Windows:

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

  • do not play in Safari on MacOS
  • 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
1 Like

Right…

That’s why I chose to use a mp3 encoder. Only using the MediaRecorder API in that way won’t support all browsers.

1 Like

So… are we back in the situation where a plugin works, but a component not :wink:

2 Likes

The component works in the same way it always has. Considering the clear interest in this I’ll try to find some time to address the safari issues later this week.

4 Likes

Ok, this component now

  • supports all browsers (including Safari, Firefox and Chrome iOS)
  • uses no external dependencies
  • works with the latest Discourse
9 Likes

As our british friends say: splendid indeed.

Works nicely. Thanks.

2 Likes

Happy Very Funny GIF by Disney Zootopia

2 Likes

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.