Audio element not working properly with Safari

7
votes

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

4
htmlaudiosafarihtml5-audio
If your files are in the same directory, try removing the audio/ from the src. Does this page work for you in Safari? w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all – keyboardP
They're in a separate directory. It appears to be a server issue. I tried serving the page from a localhost server and it worked fine. Our remote server doesn't seem to want to serve the audio file to the Safari web browser (all other browsers work fine). – bgmaster

4 Answers

8
votes

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).

2
votes

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.)

0
votes

Try installing apple quick time. I don't know about desktop versions but the IOS versions use quicktime to play sound from safari.

0
votes

yes, an invalid HTTPS certificate or a HTTP Auth does not works on safari ( tested on customized safari browser on low end linux device ). In order to make it work, please use valid https certificate.