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

Posted 2023-02-25

【中文标题】如何制作音频播放/暂停按钮？

【英文标题】：How to make an audio play/pause button?

【发布时间】：2017-06-04 20:29:30

【问题描述】：

我最近了解到如何在 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> 

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

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

【问题讨论】：

如果您不喜欢接受有用的答案，请至少为有用的答案投票...只需每次点击即可向每个人显示“谢谢”。

【参考方案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;
;

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

【讨论】：

我是否将 mp3 链接添加到链接按钮的 href 或什么？将不胜感激 js fiddle！

@AsifAli 这是 javascript 代码，您需要在

【参考方案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>

【讨论】：

您忘记关闭标签 但在这里可以正常工作 ;)

谢谢，修复了

是的，但是你需要使用