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>

其中显示的内容类似于矩形，上面有各种选项，如暂停/播放，下载，设置音量等。

但我怎么能代替这个＆＃34;音频播放矩形＆＃34;有一个按钮，当点击时播放音频一次，然后在播放音频时点击它，然后再次点击连续播放。

Answer 1

这是一个纯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>

Answer 2

您可以使用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;
};

只需将参数替换为您的参数。

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

2 个答案: