如何通过单击按钮切换音频play（）pause（）？

Question

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?

Answer 1

将您的$('a.audio-btn')更改为$('a.play-pause') 。

Answer 2

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> 

Answer 3

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;
};