How to make an audio play/pause button?

Question

I recently learned about embedding audio in html like below.

 <audio controls>
  <source src="sample.ogg" type="audio/ogg">
  <source src="sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

Which displays something like a rectangle with various options on it like pause/play, download, set volume etc.

But how can I instead of this "audio playing rectangle" have a button that when clicked plays the audio once and on clicking on it while the audio is playing pauses it and on clicking again continuous playing.

Answer 1

You can use Javascript to perform such actions.

Try the following

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

Just replace the parameters to yours.