Improve Safari compatibility

[dontcallmedom]

No description provided.

[tidoust]

That does improve things but does not fix playback. The call to decodeAudioData still fails (with null, not exactly easy to tell what happens). Digging things up, I believe the problem is the following:

• The recorder records media using audio/webm
• The server stores that media with an .mp3extension. I suppose you were trying to confuse people there. Well, I confirm that it works, it took me some time to realize that the mp3 files were not mp3 files...
• Safari can decode mp3, which these files are not, but it cannot decode webm, which these files actually are.

According to Can I Use, Safari supports the Opus codec used in the webM container, but only when packaged in a CAF container file (audio/x-caf) which seems Apple specific.

Is there a common recording format across browsers that can also be decoded across browsers for playback?

[dontcallmedom]

I don't disagree that saving webm as mp3 is a tad confusing, but then surely URIs are opaque :)

I tried getting a clear answer early on wrt common recording format, but failed to find one; I had assumed Mr Web Media would know.

I guess we might have to add transcoding to the node server :(

[dontcallmedom]

The codec question would also apply to recording presumably.

Out of curiosity, how do you test in Safari?

[dontcallmedom]

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

[dontcallmedom]

The codec question would also apply to recording presumably.

Well, it would if Safari supported MediaRecorder, which it apparently doesn't, although it seems an incomplete version was added to TP73 (but then shouldn't this be part of the latest e.g. iOS14 release?)

There is a polyfill for the API: https://github.com/ai/audio-recorder-polyfill

[tidoust]

The codec question would also apply to recording presumably.

Even leaving Safari aside, I note implementations of MediaRecorder only seem to support media containers that are both for audio and video. For instance, it does not seem possible to specify audio/wav, audio/flac, or audio/mp3, which are audio-only containers (well, in the case of mp3, it's more a shortcut, as the container is still mpeg). That's sad because these formats seem well supported across browsers for playback.

Out of curiosity, how do you test in Safari?

The old way. I have an iPad and just window.alert errors...

[tidoust]

Player seems to work (provided that mp3 versions of the files are available). Recorder does not. I'll try to find out why.

[tidoust]

For recording, on top of the recorder itself, one issue is that Safari requires a user activation for play(), at least on iOS. The 3.. 2.. 1.. dance means that we're no longer "user activated" when ref.play() gets called.

Note Safari is also pretty aggressive at not loading media content to save network, so we'll probably want to call load as well to avoid start delays. A workable solution might be to use the Web Audio API there as well to program our little dance... There are no "timeupdate" events in the Web Audio API but then a timeout would probably work just as well.

I suggest to handle recording in a separate PR. At least, this fixes playback.

[dontcallmedom]

Updated without the recorder upgrade for now