HTML5 - How can I play an audio file multiple times (replay) on a mobile browser?

Question

So I was recently trying to learn html5 stuff and got to the audio tag. It seems to work just fine on my PC's browser, Chrome, but not so much on my android (4.0, using both the stock browser and dolphin). It will play the audio once, but never again. Take this site for example:

http://www.stefanvignir.de/rimshot/

Very basic, it has a button that plays audio every time you press it, but not on my android. It only plays the first time you press it. How do you get around this? Just wait for mobile browsers to update?

I heard a workaround is to set audio.currentTime = 0; but that didn't seem to solve anything. Apparently you can reset the source (audio.src = audio.src) and that will allow you to play it more than once, but it has to re-download the file. A workaround, I guess, but not acceptable.

Any suggestions? Thanks.

Answer 1

this works in desktop and andriod browsers for multiple presses - and you can wrap in a div etc for styling:

<a onclick="this.firstChild.play()"><audio src="1.mp3"></audio>play</a>

More than just the audio tag so you have more control over what the play button looks like. If you need more buttons you can change the code for pause etc