如何通过单击按钮切换音频play()pause()?

时间:2018-07-11 03:22:09

标签: javascript jquery html5-audio

我已将音频添加到我的网站,该音频在打开网站时正在播放。现在,我想添加播放/暂停按钮来切换音频。

这是我尝试的方式:

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

但是它对我不起作用。谁能告诉我我哪里出问题了?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

出于演示目的,我添加了video标签,要使用音频,您可以将video替换为audio标签并使用

$('.play-pause')

代替

$('a.audio-btn')

要获得音频,请在video标签处使用它:

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

答案 2 :(得分:0)

到底什么不起作用?该按钮没有出现吗,不起作用?

我建议使用类似以下的内容:

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