Problems playing HTML5 audio multiple times in Safari

Question

Here is my code:

Html:

<div id="audio-files" style="display: none;">
    <audio id="click-sound">
        <source src="/assets/click.mp3" type="audio/mpeg">
        <source src="/assets/click.wav" type="audio/wav">
    </audio>
</div>

JavaScript:

play: function() {
  var audio = $('#audio-files').find('audio#click-sound');
  if (audio.length) {
    audio[0].play();
  }
}

Desired behaviour:
When I call play(), the sound should play once. There should be only 1 request to the server - on page load. Multiple calls to play() should not trigger multiple requests.

Actual behaviour:
- Firefox (19.0.2), Chrome(26.0.1410.43) and Opera(12.15) work as expected.
- Safari (6.0.3) plays the desired sound only once, then refuses to play it or any other sound when asked to.

I tried adding audio[0].load() before audio[0].play() but this causes the browser to make a request each time it is asked to play the audio, which is totally undesirable.

Fiddle: http://jsfiddle.net/Tpvfm/

Safari has some interesting audio issues. One thing I noticed is that audio will not start if programmatically triggered WITHOUT user input. Essentially, if your sound is being triggered without user clicking or doing something, very likely Safari will refuse to play it. How is audio[i].play() being called? — akamaozu, Apr 10 '13 at 18:16
In the sample jsfiddle, it is being called via a user click. In our code though, it is programatically triggered... Do you have any link to documentation/article about the subject? — Georgi Atsev, Apr 11 '13 at 08:36

score 1 · Accepted Answer · answered Apr 12 '13 at 14:44

1

I think there is a problem with your example mp3 file. I just removed it (mp3) from your fiddle and it works in my Safari on OSX.

<div id="audio-files" style="display: none;">
  <audio id="click-sound">
    <source src="/assets/click.wav" type="audio/wav">
  </audio>
</div>

Fiddle: 73GCX

answered Apr 12 '13 at 14:44

danilopopeye

9,610
1
23
31

Hmm... That is strange. You are right, when I leave only the wav source, it works OK. But why? Mp3 format as a source, should be supported in Safari. Btw I use different files in my production environment, this file is just something I found randomly in the internet. The problem is reproduced however with both this and our 2 production .mp3 files. Please give a reasonable explanation and I will give you your reward. Thanks! – Georgi Atsev Apr 12 '13 at 15:19
@GeorgeAcev you're missing the Content-Range header. See [Apple Developer](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW1) and [html5-audio-safari-live-broadcast-vs-not](http://stackoverflow.com/questions/1995589/html5-audio-safari-live-broadcast-vs-not) – danilopopeye Apr 12 '13 at 21:40

Problems playing HTML5 audio multiple times in Safari

1 Answers1