How to toggle audio play() pause() with a button click?

I have added an audio to my website, which is playing when site is opened. Now I want add play/pause button to toggle the audio.

This is how I tried it:

<audio id="myAudio" autoplay >
 <source src="mp3/background-music.mp4" type='audio/mp4'>
 Your user agent does not support the HTML5 Audio element.
</audio>

<a type="button" class="play-pause" title="play/pause"><i class="fa fa-pause"></i></a>


<script type="text/javascript">
  $(document).ready(function() {
    var playing = false;

    $('a.audio-btn').click(function() {
        if (playing == false) {
            document.getElementById('myAudio').play();
            playing = true;
            $(this).text("stop sound");

        } else {
            document.getElementById('myAudio').pause();
            playing = false;
            $(this).text("restart sound");
        }
    });
  });
</script>  

But its not working for me. Can anybody tell me where I have gone wrong?

3 answers

  • answered 2018-07-11 03:46 Hayden

    What exactly is not working? Does the button not appear, does it not function?

    I would suggest using something like 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;
    };
    

  • answered 2018-07-11 03:51 Nguyễn Thiện Lai

    Change your $('a.audio-btn') into $('a.play-pause').

  • answered 2018-07-11 04:05 Jagjeet Singh

    For demo purpose, i add video tag, to work with audio you can replace video to audio tag and Use

    $('.play-pause')
    

    Instead of

    $('a.audio-btn')
    

    For audio use this at the place of video tag :

    <audio id="myAudio" autoplay>
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='audio/mp4'>
       Your user agent does not support the HTML5 Audio element.
    </audio>
    

    $(document).ready(function () {
     var playing = true;
     $('.play-pause').click(function () {
      if (playing == false) {
       document.getElementById('myAudio').play();
       playing = true;
       $(this).text("Sop Sound");
    
      } else {
       document.getElementById('myAudio').pause();
       playing = false;
       $(this).text("Restart Sound");
      }
     });
    });
    a {
      background: #000;
      color: #fff;
      cursor: pointer;
      padding: 10px;
    }
    video {
      width: 200px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <video id="myAudio" autoplay>
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4'>
     Your user agent does not support the HTML5 Audio element.
    </video>
    <a type="button" class="play-pause" title="play/pause">Play / Pause</a>