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

【问题标题】：How to toggle audio play() pause() with one button or link?如何用一个按钮或链接切换音频播放（）暂停（）？
【发布时间】：2015-02-06 17:52:56
【问题描述】：

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

这是我目前所拥有的，至少让声音文件可以播放：

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

【问题讨论】：

onclick="audio.paused?audio.play():audio.pause()"

标签： javascript html audio

【解决方案1】：

一个普通的 Javascript 方式来做你需要的事情。

注意：我注意到 cmets 在其他问题上对原生 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：（使用基于 dandavi's comment 的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>

【讨论】：

如果有人问为什么 getter 和 setter 很重要；这是在选择 makeXTrue()、makeXFalse() 而不是 setX(value) 时出现的复杂性的主要示例。
我认为第一个解决方案不值得保留。除非对paused 的支持存在问题，否则将播放器的标签保持在与其自身不同的状态不仅是多余的，而且如果您的代码中出现问题，还会要求出现异步问题。 paused 形式的单一事实来源可以防止这种情况发生。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用 jQuery 对此进行切换。

<a id="music-button" style="cursor:pointer;">
<img src="http://i.stack.imgur.com/LT3WE.png"></a>
<audio id="playMusic" autoplay>
<source src="sound.mp3">
</audio>

<script type="text/javascript">
$('#music-button').toggle(
function () {
document.getElementById('playMusic').play();
},
function () {
document.getElementById('playMusic').pause();
}
);
</script>

【讨论】：

你能不能也给一个纯javascript的解决方案？不是每个搜索这篇文章的人都会想要或有能力使用 jQuery。
@Shane 可能有点晚了，但我添加了一个香草 JavaScript 解决方案。

【解决方案4】：

myAudio 变量必须在函数调用中...它工作正常

function togglePlay() {
  var myAudio = document.getElementById("myAudio");
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};

<audio 
id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto">
</audio>

<input type="button" value="sound" onclick="togglePlay()" />

【讨论】：

【解决方案5】：

var Sample-Audio = document.getElementById("Sample");

function togglePlay() {
  return Sample-Audio.paused ? Sample-Audio.play() : Sample-Audio.pause();
};

<audio id="Sample" preload="auto">
  <source src="./sounds/rain.mp4" type="audio/mp4">
  <source src="./sounds/rain.ogg" type="video/ogg"> 
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

【讨论】：