We Keep Coding

Implementing an AudioWorklet in Safari

I have been exploring some of the samples which are listed here: Google Chrome Labs - Audio Worklet. They have helped me get most of the way to implementing my own WASM based AudioWorklet. It soon came to my attention that Safari doesn't support Worklet.addModule()? I can't find any alternative ways online that demonstrate how to implement a Audio Worklet without addModule, can anyone help me understand if it is possible use an Audio Worklet in Safari without this method?

I found that in Chrome, you have to:
// wait for user interaction
const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)
However in Safari, if I enable "Console > Media Logging" I can see this fails with
BaseAudioContext::willBeginPlayback returning false, not processing user gesture or capturing
This seems to be due to the await between the user interaction and the new AudioWorkletNode.
If I change the order in Safari to:
const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
// wait for user interaction
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)
This works, but it now doesn't work in Chrome (!) which now gives the error:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
Perhaps enable "Console > Media Logging" is Safari dev tools and see if this is the same issue you are getting?
To make it work in both Safari and Chrome, you can create the AudioContext on page load and then call resume after user interaction:
const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
// wait for user interaction
await context.resume();
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)

I'm not sure why it didn't work for you but the latest versions of Safari support the AudioWorklet (with some bugs). It doesn't work on pages served over http. But it should work on pages served over https though. Maybe that was the issue.
If you want to support older browsers (that don't support the AudioWorklet yet) you could try standardized-audio-context or jariseon/audioworklet-polyfill or GoogleChromeLabs/audioworklet-polyfill or audioworkletpolyfill.js from the javascriptmusic project.

Mediarecorder: How to support audio recording on Safari, IE 11?

Problem Statement
Hi, I want to add support for audio recording using MediaRecorder API in my app for IE 11 and Safari, but couldn’t figure anything so far. Are there any polyfills available that can help me add support for the same in these browsers?
Safari:
I can see Safari does have MediaRecorder API supported under experimental features, but even that doesn’t seem to work properly despite giving a proper mime type of audio/webm, it always returns a blob of video/mp4 mime type.
IE 11:
It's an ancient piece of rubbish, that's all I can say :)
Code:
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
})
const mimeType = 'audio/webm'
// check if above mime type is supported in browser and instantiate recorder
if (MediaRecorder.isTypeSupported(mimeType)) {
this.recorder = new MediaRecorder(this.stream, { mimeType })
} else {
this.recorder = new MediaRecorder(this.stream)
}
recorder.start()
NOTE: Please don't ask to ditch these browsers as they are my requirement :)

Safari Support:
I was able to add support for MediaRecorder API in Safari by using Audio Recorder Polyfill. You can check this NPM package here.
Steps (React JS):
Install the package using npm i audio-recorder-polyfill
Add this piece of code in public/index.html. This will make sure that the polyfill is loaded only for the browsers which do not support MediaRecorder API.
<script>
// load this bundle only for browsers without MediaRecorder support
if (!window.MediaRecorder) {
document.write(
decodeURI('%3Cscript defer src="/polyfill.js">%3C/script>')
)
}
</script>
Add this piece of code in src/index.tsx or src/index.js. This will assign this polyfill to MediaRecorder present in window object.
import AudioRecorder from 'audio-recorder-polyfill'
window.MediaRecorder = AudioRecorder
If you are using Typescript, you might have to add type declarations in src/audio-recorder-polyfill.d.ts
declare module 'audio-recorder-polyfill'

WebRTC Webcam not working on Safari and Microsoft Edge

I want to access the webcam and audio device to record video using WebRTC. However, it's only working on Chrome and Firefox.
Interestingly, it's not working on Edge and Safari. It asks for camera use permission, when we grant permission, the camera doesn't load and I get the following error in console.
ERROR Message on Safari and Edge
navigator.getUserMedia error: ReferenceError
My Code looks like this
async init(constraints) {
try {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
this.handleSuccess(stream);
} else {
this.setState({
error:
'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
});
}
if (!MediaRecorder) {
this.setState({
error:
'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
});
}
} catch (e) {
this.setState({
error:
'We could not find any audio/video recording device. Please make sure you have given permission to use webcam and microphone.',
});
console.error('navigator.getUserMedia error:', e.name);
}
}
Any suggestions to load the camera perfectly in all these browsers.

Looks like you are having the issue in the MS Edge legacy browser. Correct me if I am misunderstanding.
I try to test the official sample code in the MS Edge legacy browser (44.18362.449.0) and it works fine.
WebRTC samples getUserMedia
I suggest you can test this example in the MS Edge browser and let us know whether it worked or not.
If it works then you can modify your code based on the official sample from their Github page.
If you are using an older version of the MS Edge browser then I suggest you update with the latest version and again test the issue.

MediaRecorder on Firefox 53.0.2 does not support audio recording

I have an issue with the MediaRecorder API. It works fine on Chrome and used to work on earlier versions of Firefox (Mac), but since version 53.0.2, I get the following in the dev console:
--> MediaRecorder.isTypeSupported('audio/webm')
false
--> MediaRecorder.isTypeSupported('video/webm')
true
Did Firefox stop supporting audio recording through the MediaRecorder API?

Firefox did implement MediaRecorder.isTypeSupported() in FF47. I did an mozRegression loop between now and 47 to check when it did change as you said.
Result : It never reported true for audio/webm in any version tried (on osX).
But, Firefox does support audio/ogg mimeType, (which I guess is the default for audio only). And since both Firefox and Chrome do record audio encoded with an Opus codec, the more common mimeType for the container is indeed audio/ogg.
Note that Chrome doesn't return true for audio/ogg.
Looking forward for this API.

getUserMedia with MediaStreamAudioSourceNode on Android Chrome

I am trying to use media streams with getUserMedia on Chrome on Android. To test, I worked up the script below which simply connects the input stream to the output. This code works as-expected on Chrome under Windows, but on Android I do not hear anything. The user is prompted to allow for microphone access, but no audio comes out of the speaker, handset speaker, or headphone jack.
navigator.webkitGetUserMedia({
video: false,
audio: true
}, function (stream) {
var audioContext = new webkitAudioContext();
var input = audioContext.createMediaStreamSource(stream);
input.connect(audioContext.destination);
});
In addition, the feedback beeps when rolling the volume up and down do not sound, as if Chrome is playing back audio to the system.
Is it true that this functionality isn't supported on Chrome for Android yet? The following questions are along similar lines, but neither really have a definitive answer or explanation.
HTML5 audio recording not woorking in Google Nexus
detecting support for getUserMedia on Android browser fails
As I am new to using getUserMedia, I wanted to make sure there wasn't something I was doing in my code that could break compatibility.
I should also note that this problem doesn't seem to apply to getUserMedia itself. It is possible to use getUserMedia in an <audio> tag, as demonstrated by this code (utilizes jQuery):
navigator.webkitGetUserMedia({
video: false,
audio: true
}, function (stream) {
$('body').append(
$('<audio>').attr('autoplay', 'true').attr('src', webkitURL.createObjectURL(stream))
);
});

Chrome on Android now properly supports getUserMedia. I suspect that this originally had something to do with the difference in sample rate between recording and playback (which exhibits the same issue on desktop Chrome). In any case, all started working some time on the latest stable around February 2014.