Javascript audio play on click and stop on click

Question

Current code:

 <script> function play() { var audio = document.getElementById("audio"); audio.play(); } </script> <button class="matrixBtn" value="PLAY" onclick="play()">star shopping</button> <audio id="audio" src="xxx"></audio> 

When I press the button the music starts, which is exactly what I want. But I also want if I press the button again that the music stops. How can I do this without create a second button?

Answer 1

the <audio> tag is a HTMLMediaElement , so it has a property .paused which you can use to determine the current state and act accordingly:

function playPause() {
  var audio = document.getElementById("audio");
  if(audio.paused)audio.play();
  else audio.pause();
}