Play audio and restart it onclick

Question

I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.

<audio id="audio1" src="01.wav"></audio> <button onClick="play()">Play</button> 

When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.

function play() {     document.getElementById('audio1').play(); } 

Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?

Answer 1

To just restart the song, you'd do:

function play() {     var audio = document.getElementById('audio1');     if (audio.paused) {         audio.play();     }else{         audio.currentTime = 0     } } 

FIDDLE

To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :

function play() {     var audio = document.getElementById('audio1');     if (audio.paused) {         audio.play();     }else{         audio.pause();         audio.currentTime = 0     } } 

FIDDLE

Answer 2

soundManager.setup({ preferFlash: false, //, url: "swf/" onready: function () {     soundManager.createSound({         url: [             "http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"         ],         id: "music"     });     soundManager.createSound({         url: [             "http://www.w3schools.com/html/horse.mp3",          ],         id: "horse"     });     soundManager.play("music");  } 

}).beginDelayedInit();

And to start horse and pause all other sounds currently playing in a click event:

$("#horse").click(function () { soundManager.stopAll(); soundManager.play("horse"); 

});