如何制作音频播放/暂停按钮？

Question

我最近学到了如何在html中嵌入音频，如下所示。

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

它显示一个类似矩形的东西，上面有各种选项，如暂停/播放、下载、设置音量等。

但是我怎么才能有一个按钮来代替这个“音频播放矩形”，当点击时播放音频一次，在音频播放时点击它会暂停它，再次点击就会继续播放。

Answer 1

您可以使用Javascript来执行此类操作。

请尝试以下操作

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

只需将参数替换为您的。

Answer 2

下面是一个使用纯JS的简单示例。我正在使用一个按钮上的类来了解音频是否正在播放，当按钮处于播放/暂停状态时，您可以对不同的UI使用相同的类。

链接：https://jsfiddle.net/p4mksfm1/

<audio id="testAudio" hidden src="https://api.twilio.com/cowbell.mp3" type="audio/mpeg">
</audio>

<button id="playAudio">Play</button>

<script type="text/javascript">
document.getElementById("playAudio").addEventListener("click", function(){
    var audio = document.getElementById('testAudio');
  if(this.className == 'is-playing'){
    this.className = "";
    this.innerHTML = "Play"
    audio.pause();
  }else{
    this.className = "is-playing";
    this.innerHTML = "Pause";
    audio.play();
  }

});
</script>