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＆＃39; .toggle() 隐藏/显示，而不是您需要的。

首先，检查是否paused，而不是play()或pause()

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

其中AUDIO是您的HTMLMediaElement

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

P.S：我将您的ID重命名为更有意义的用于演示的内容

toggle-audio-play-pause-image 在这里，你可以找到另一个简单但很好的多轨道实现。

MOZ ^docs：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();
});

无法让Javascript播放器工作

2 个答案: