• Custom Printed T-shirts
  • Seo Expert
  • Bisen Infotech
  • Khaali Paper

Click the buttons to play or pause the audio

If you have a button, and click on it once, it would like it to play audio. And when audio is playing and click again on same button, want it to pause/stop.


  1. Include the audio file in audio tag.
  2. Write a javascript function for play and pause for audio with change image ON/OFF.
  • Html
  • JavaScript
  • Example
<audio id="audioFile">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.ogg" type="audio/ogg">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<a class='musicOff' href="#!"><img src="stop-audio.png" id="myImg"></a>
<script type="text/javascript">
  function changeImg() {
      var image = document.getElementById('myImg');
      if (image.src.match("play-audio.png")) {
          image.src = "stop-audio.png";
      }
      else {
          image.src = "play-audio.png";
      }
  }
  $(document).ready(function(){
    $(".musicOff").click(function(){
        var image = document.getElementById('myImg');
        var x = document.getElementById("audioFile");
        x.play();
        if (image.src.match("stop-audio.png")) {
            image.src = "play-audio.png";
        }
        else {
            image.src = "stop-audio.png";
            x.pause();
        }
    });
  });
</script>
<!DOCTYPE html>
<html>
<body>

<audio id="audioFile">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.ogg" type="audio/ogg">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<a class='musicOff' href="#!"><img src="stop-audio.png" id="myImg"></a>

<script src="http://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  function changeImg() {
      var image = document.getElementById('myImg');
      if (image.src.match("play-audio.png")) {
          image.src = "stop-audio.png";
      }
      else {
          image.src = "play-audio.png";
      }
  }
  $(document).ready(function(){
    $(".musicOff").click(function(){
        var image = document.getElementById('myImg');
        var x = document.getElementById("audioFile");
        x.play();
        if (image.src.match("stop-audio.png")) {
            image.src = "play-audio.png";
        }
        else {
            image.src = "stop-audio.png";
            x.pause();
        }
    });
  });
</script>

</body>
</html>

Play audio file using play button and stop plaing audio with pause button

OR


<audio id="audioFile">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.ogg" type="audio/ogg">
  <source src="http://khaalipaper.com/blog/shree-hanuman-chalisa.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>

<script>
  var x = document.getElementById("myAudio");
  function playAudio() {
    x.play();
  }
  function pauseAudio() {
    x.pause();
  }
</script>

You can customize this code further as per your requirement.