Why can't I play sounds more than once using HTML5 audio tag?

Question

This is how the sound is \"stored\":

In the actual game (whi

Answer 1

I had this issue recently with an html5. Worked everywhere except safari. Using load() before calling play() solved this problem. It also helps to make sure that sound effects do not overlap with heavy clickers when event-handlers trigger sounds.

Here what I used
<audio id="sound-one" preload="auto">
    <source src="http://myurl/foo.mp3"></source>
    <source src="http://myurl/foo.ogg"></source>
</audio>


<a href="#" id="navigation-id">click here</a>  



Jquery
$("#navigation-id") //this attached is to an element on the page
.mouseover(function() {
    sound-one.load();                               
    sound-one.play();
    });

Answer 2

For anyone stumbling across this post in the future, the audio tag is really not a great way to do game audio.

I'd highly recommend taking the time to learn the WebAudio API instead.

Answer 3

A few months before I faced the same issue while developing a Piano in HTML5. When a key was pressed again and again I had to stop, rewind and play the audio on each key press. I used the same code written in this question which worked in Firefox and Safari, but not in Chrome. In Chrome it didn't play again. Finally I had to modify the code to make it work. Added one listener for the event onseeked, then set currentTime = 0 and in the event handler invoked play. This worked for me. Similarly I had to wait for the event of one action before giving next action in many places. It was an old version of Chrome. Later I found out that even some versions of Browsers support Audio, the way each one supports is slightly different. This difference won't be visible if we simply put an audio tag and play the audio, but will experience when we try to control the audio using Javascript. Anyways its all about older versions of Browsers, its much much better in all latest versions. So please check in the latest version of Chrome ( Even my piano worked in Chrome 10 without the code modification ) and regarding the audio format, I would suggest you to keep mp3 and ogg files of your audio instead of single wav file.

Answer 4

See this slide and the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.

For all the resources to make some awesome games, part of their talk: http://madebyevan.com/gamedevclass/

Audio still doesn't work consistently across all browsers, as of right now:

• An element must be reloaded in Chrome or it will only play once
• An element must not be reloaded in Firefox or there will be a delay

function playSoundEvent() {
  if (window.chrome) elems[index].load()
  elems[index].play()
  index = (index + 1) % elems.length
}