Audio element not working properly with Safari

Question

I can't seem to get the audio element to work properly in Safari (v 5.1.2). I've tried moving the file to the same folder as the page, using both mp3 and mpeg MIME types, and changing filenames. It seems to work fine in all other browsers, but in Safari the audio element is created, but only shows that it is loading and will not play. Any ideas?

<audio controls preload="metadata">
  <source src="audio/song.mp3" type="audio/mpeg" />
  <source src="audio/song.ogg" type="audio/ogg" />
</audio>

Thanks

Answer 1

Does your website use an invalid HTTPS certificate or a HTTP Auth? I had this issue but found that Safari was having issues with either my invalid HTTPS cert or the Basic Auth (on the staging server).

Answer 2

Safari does not seem to load sounds reliably with preload="metadata".

You can try this in the console, of any webpage really:

var snd = document.createElement('audio'), src = document.createElement('source');
src.src = "http://www.largesound.com/ashborytour/sound/brobob.mp3";
src.type = "audio/mpeg";
snd.appendChild(src);
snd.preload = 'metadata';
snd.play();

It doesn't work. Then:

snd.preload = null;   // equivalent to 'auto'

And voilà! It starts playing.

(I've filed this as rdar://problem/11481585, not that that helps any of us.)