0

I am building a web app which has a audio recording feature. I have followed the MDN document here: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

The example in the MDN has a live demo here:

https://mdn.github.io/dom-examples/media/web-dictaphone/

I tested four browsers here: Chrome, FireFox, Safari, Edge.

Safari works the worst. It will directly generate a error after recording. Also I tested on my own website, even for the audio recorded by chrome, when it loads into Safari's tag, it will directly show errors and it cannot be played. I already opened the experimental feature Media Recorder in Safari develop menu. What can I do to make it work?

Chrome and Edge works normal. But a weird thing is, they won't preload the audio they recorded. It will show like the tag is empty. When we click the play button in the audio tag, the audio will play normally. I tried for other audios which are not recorded by browser itself, it can preload normally. Is there a way to solve this?

Firefox works the best here. I didn't find any weird behavior.

Thanks for the help.

Xingce Bao
  • 51
  • 4

1 Answers1

1

I recently implemented this and found mimetype is important. On Chrome and Firefox, mimetype 'audio/webm' works, while on Safari I need to use 'audio/mp4'.

You can then set this when you start the MediaRecorder:

mediaRecorder = new MediaRecorder(mediaStream, {
  mimeType: 'audio/mp4',
})

If you don't set it yourself, you can also detect it by initializing mediaRecorder and then calling mediaRecorder.mimeType later.

If you create a Blob later, you can specify the mimeType: new Blob(chunks, { type: "audio/mp4" })

One last note - .mp4 ended up being unacceptable for my backend, so I now use audio-recorder-polyfill for Safari, to use mimeType 'audio/wav'. Available on npm.

iain
  • 26
  • 4
  • 1
    Good answer! Safari indeed works when using mp4. Just I don't quite understand why google chrome and edge refuse to preload what they record? When record done, Firefox will show the audio length but Chrome will display like an empty audio tag... – Xingce Bao Jun 22 '23 at 15:13
  • Yes, please refer to this thread: https://stackoverflow.com/a/39971175/3826551 – iain Jun 22 '23 at 16:32
  • my gosh you perfectly solved my problem. Really useful answer! You are a real html audio expert. Thank you very much!!! – Xingce Bao Jun 24 '23 at 01:38
  • by the way i tried the audio-recorder-polyfill, it seems it hasn't been updated for 3 years and I tried multiple browsers it doesn't work... The Google Chrome will notify scriptProcessor deprecated. https://developer.chrome.com/blog/audio-worklet/ For other browsers it does not work as well. I don't know why... – Xingce Bao Jun 24 '23 at 23:21
  • In fact I checked the issues of audio-recorder-polyfill there are really tons of similar issues raised but the author seems doesn't to plan to fix it anymore... – Xingce Bao Jun 24 '23 at 23:31
  • I am using it in Safari with the latest Typescript+React as so: `import ARP from 'audio-recorder-polyfill'; const isSafari = [...regex]; if (isSafari) window.MediaRecorder = ARP; const mediaRecorder = new MediaRecorder(mediaStream, { mimeType: isSafari ? 'audio/wav' : 'audio/webm', });` – iain Jun 26 '23 at 16:08
  • The polyfill is mostly for Safari as far as I understand... for Chrome etc, they are implementing the "web standards" including webm. – iain Jun 26 '23 at 16:10
  • @XingceBao here is another polyfill that I will be testing as I try to move to smaller file size .ogg files: https://github.com/kbumsik/opus-media-recorder – iain Jul 06 '23 at 14:12