无法让 Javascript 播放器工作

Question

我需要帮助使这个javascript播放器在点击时播放。

我正在遵循一个例子。我以为我一切都正确，但我无法让它发挥作用。我知道 MP3 文件的路径是正确的，因为当网站加载时，文件会播放。 但是，我需要文件在单击时播放。

代码如下：

<a id="mtoogle" style="cursor:pointer;">
<img src="../../../Custom/images/speaker.png"></a>
<audio id="playTune">
<source src="../../../media/temp_Audio1.mp3">
</audio>
<script type="text/javascript">
$('#mtoogle').toggle(
function () {
document.getElementById('playTune').pause();
},
function () {
document.getElementById('playTune').play();
}
);
</script>

有人可以指出我错过了什么吗？我将不胜感激。

Answer 1

jQuery的.toggle()确实隐藏/显示，而不是你需要的。

首先，检查是否paused，分别play()或pause()

// Toggle audio play() / pause() methods
AUDIO[AUDIO.paused ? "play" : "pause"]();

其中AUDIO是你的 HTMLMediaElement

例：

var AUDIO = $("#audio")[0];
$("#btn").click(function() {
  AUDIO[AUDIO.paused ? "play" : "pause"]();
});    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" style="cursor:pointer;"><img src="//i.stack.imgur.com/qseZe.png"></a>
<audio id="audio">
  <source src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">
</audio>

PS：我将您的ID重命名为更有意义的演示目的

切换-音频-播放-暂停-图像 在这里，您可以找到另一个简单而不错的多曲目实现。

MOZ^文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused

Answer 2

问题是关于Toggle()方法。

它也会起作用。

$('#mtoogle').click(function () { 
var tune = document.getElementById("playTune");
if(tune.paused)
  tune.play();
else
  tune.pause();
});