CODEWITHSUNDEEP
javascriptsafarihtml5-audio
Georgi Atsev
Georgi Atsev

Reputation: 3045

Problems playing HTML5 audio multiple times in Safari

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/

Upvotes: 3

Views: 3737

Answers (1)

danilopopeye
danilopopeye

Reputation: 9998

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

Upvotes: 1

Related Questions