user2340767 user2340767 - 7 months ago 30
HTML Question

Play audio and restart it onclick

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

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