audio-recorder-polyfill
audio-recorder-polyfill copied to clipboard
ai
onaudioprocess is not being fired in ios safari.
I'm looking forward for this polyfill :)
In the current version I have a problem with the playback of the blob in ios safari 11 (problem is also in the demo). Making the blob into url using createObjectURL() and attach it to a player don't work in ios safari 11.
I noticed it in the demo (https://ai.github.io/audio-recorder-polyfill/). I attached a error event listener to the player to see whats up and I got a MediaError object with error code 3 when trying to play the recording in ios safari 11.
MDN on error code 3 in the MediaError object:
MEDIA_ERR_DECODE: Despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
The blob size is always 44 B when recording in ios safari, so I dont know if its a encoding problem or a stream problem. I've tested it on a iphone 6 and two iphone 7, and the same error occurs for all devices.
Unfortunately encoding is not my field of expertise, but I can help you test it in ios.
It seems like onaudioprocess is not being fired in ios safari, so it doesn't have anything to do with the encoding. I'm a bit busy with a deadline atm, but I will look more into it this weekend or next week and see if I can give you a pull request. Here is also an example of recording that works in ios.
The main problem is that not all Safari has this problem :(.
BrowserStack and many my friends reported that everything is OK. In other had one my friend and you have the same problem with 44 B.
So it is environment problem.
Another thing — 44 B is a WAV file header. So Web Worked didn’t receive data from a microphone. Can you show your screenshot? How many seconds did you wait before pressing Record and Stop buttons?
For what it's worth, I believe the issue here is discussed in this comment. Basically, creating a new AudioContext() must happen in the event handler of a user action, or else Safari will suspend the audio context and prevent you from resuming it. Since getUserMedia() returns a promise, any code that works with the promised stream must occur in a function thened or awaited on that promise. But since this is added to the event queue and executed later, Safari doesn't consider it to be running in an event handler, so new AudioContext() here doesn't work properly. The upshot is that to record audio in iOS Safari (as I understand it), you need to have: user event triggers an event handler --> inside that event handler, you create new AudioContext() and run getUserMedia() --> in getUserMedia()'s then clause you can do everything else you need to with the context and the stream.
Since creating a new MediaRecorder is supposed to involve passing it a MediaStream object, it's impossible to work with that MediaStream using any AudioContext created later. I.e. I think iOS Safari is pretty much incompatible with the MediaRecorder specification right now.
I created a hack that worked for my recent needs by creating the MediaStream within MediaRecorder's start method. But this is not really pull-request ready, because I've messed with the API to the point that it can't accurately be called a polyfill. Hope this provides some useful food for thought though, and I'll keep pondering if there's a better way to do this when I get a chance.
@alecglassford Wow! Thanks for this great review.
I will think on next week how to implement this hack in the best way.
Confirming @alecglassford 's comment. I've devised a different hack that requires passing in the audio context and script processor to the start method. Works, but still a hack and requires user of MediaRecorder to do work specific to ios/safari.
- https://github.com/ai/audio-recorder-polyfill/compare/master...kaliatech:issue-4-ios-safari-hack?diff=split&expand=1&name=issue-4-ios-safari-hack
@kaliatech does 0.1.2 at least partially fix the problem? Now the context is created only once and then reused.
Can confirm that the PR posted by @kaliatech unfortunately does not work on iOS Safari still (on 11.2)
@ai - I am not in a position to easily test latest version of this library, but just glancing over the commits, I believe the newer approach would work well as long as the context was created within a user event handler, per alecglasssford's earlier comment.
I like the idea of using a mediarecorder polyfill as you've done here and think it's likely the cleanest option for most, but I had to test a number of other things so went with a more code heavy approach. (web-audio-recording-tests)
@nkov - The PR I submitted did work on iOS, and current versions of this library do work on iOS even without that PR. You can verify by viewing the demo URL on the homepage of this repository. If still not working for you, then the most common reason is that the setup must be done within a user event handler. i.e. Button click event handler. See code example on the home page of this repository. If still having problems, then there are few more caveats that I wrote about in the notes here: https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1
@kaliatech this link https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1 still doesn't work on Safari web browser 12.x. Something i am missing? or is there a hack underway?
The audio player just says " Error " and displays size: 44B, type: audio/wav
@arj-ary Your comment here is in the wrong repository. If you want to discuss "web-audio-recording-tests", consider posting in that repository so as not to confuse things with the excellent work being done in this repository (audio-recorder-polyfill).
In answer to your comment though, web-audio-recording-tests previously worked with Safari 12.x, and I just tested with iOS/Safari-12.4 and Mac/Safari-12.1.1. Both worked fine. Getting a 44B empty file was a common error when I was developing early versions, but I don't remember what usually led to it. Suggest restarting your device/machine and trying again.