如何通过一个按钮或链接切换音频播放（）暂停（）？

Question

我有一个在单击锚标记时播放的音频文件。如果再次单击锚标记，我希望音频暂停，我只是对 javascript 了解不够，无法完成后半部分。我不想更改他们点击的锚标签的内容，我只希望音频文件在他们点击标签时开始和暂停。

这是我到目前为止所拥有的，它至少使声音文件可以播放：

 <audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>

原文由 ExcellentSP 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种 Vanilla Javascript 方式来做你需要的事情。

注意：我注意到对其他问题的评论对原生 js 方法进行了多次投票，并且看到 OP 没有 jquery 标签。

所以 WORKING EXAMPLE ：

SOLN 1 : (我最初的解决方案使用事件)

 var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  isPlaying ? myAudio.pause() : myAudio.play();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

 <audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

SOLN 2 ：（使用 myAudio.paused 基于 丹达维评论的 属性）

 var myAudio = document.getElementById("myAudio");

function togglePlay() {
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};

 <audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

原文由 Iceman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

var audioElement= document.getElementById("audio-player");
function togglePlay() {
    if (audioElement.paused) {
        audioElement.play();
    }
    else {
        audioElement.pause();
    }
};

原文由 Peter Isaac 发布，翻译遵循 CC BY-SA 4.0 许可协议