Safari won't play <audio> if .ogg file is first in the list?

Question

I have an audio object with two sources, in M4A and OGG formats.

The code is as follows:

<audio id="audio1" controls="controls" preload="none">
<source src="music.m4a" />
<source src="music.ogg" />
</audio>

I can then call document.getElementById('audio1').play() and it starts playing.

It works well in all browsers. But in Safari, it only works if the M4A file is the first source.

I.e. if I have this code with OGG file first:

<audio id="audio1" controls="controls" preload="none">
<source src="music.ogg" />
<source src="music.m4a" />
</audio>

Safari won't react to the play() JavaScript call, only to the mouse click on the play button.

Is there any solution to this apart from always putting the M4A file first?

Thanks!

Answer 1

Have you tried telling the browser what MIME type you're using.

Use "audio/mp4" as the MIME type (don't forget to add it to your .htaccess)

<audio id="audio1" controls="controls" preload="none">
<source src="music.oga" type="audio/ogg" />
<source src="music.m4a" type="audio/mp4" />
</audio>

Answer 2

Maybe try adding an EMPTY.m4a file first? .5 sec of no noise? I have been having trouble with .ogg on safari myself. I never thought to try another type of file 1st. This will probably fix my problem. Thanks. My problem was gaps in .mps files. So I switched to .ogg. Adding a default blank .m4a might help your problem. I'm curios to know if this works, post either way.