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

Question

This is how the sound is "stored":

<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio> 

In the actual game (which I use sounds for), I use this to play the sound:

   function playSound(soundid)    {         document.getElementById(soundid).currentTime = 0;         document.getElementById(soundid).play();    } 

But the sound plays only the first time, and never again! I tried resetting the "currentTime" in the console to 0, but I literally get this:

>document.getElementById("hammer").currentTime = 0 0 >document.getElementById("hammer").currentTime 0.340... 

Why is this happening, how do I fix it?

Answer 1

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 } 

Answer 2

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();     });