Question

我正在尝试使用jQuery动态地将监听器分配给锚点以在mousedown上播放声音并在mouseup上暂停。这是我的HTML：

<p>Meet 
  <a class="easter-egg">Buck
    <audio class="egg-aud" src="file.mp3">
      <source src="file.ogg" />
    </audio>
    <img class="egg-img" alt="" src="file.jpg" />
  </a>.
</p>

我的js：

$( "a.easter-egg" ).mousedown( function() {
  $( this ).find( "audio.egg-aud" )[0].play();
});

$( "a.easter-egg" ).mouseup( function() {
  var audio = $( this ).find( "audio.egg-aud" )[0];
  audio.pause();
  audio.currentTime = 0;
});

编辑：在jsfiddle中，我的代码完美无缺，直到我将<p>包裹在<div class="entry-content">中，此时它就会中断。我将我网站的一个示例粘贴到jsfiddle，您可以尝试删除该div，并在没有它的情况下查看它。

Answer 1

问题：

您试图设置已动态附加的音频标记的currentTime。因此，您必须等待音频标签准备好播放。

解决方案：

使用canplay事件检查音频元素是否已准备好播放。

// When the audio element "can"be"play"ed, fire the function.
audio.addEventListener("canplay", function() {
   this.currentTime = 0;        
},true);

注释：

以前，您在控制台中遇到的错误是： “错误：尝试使用不可用或不再可用的对象。” 继续检查错误，它们非常有用：）
同样的事情适用于动态追加的<video>标签。

Live Demo

希望有所帮助！

Answer 2

在我上床睡觉后，Aaaaand意识到了这个问题。我最近写了一个脚本，将作者姓名的每个实例的文本更改为其帖子列表的链接。为此，它用新字符串替换每个p元素的内容，这意味着它重新创建我正在使用的锚点和音频。如此生病我想生病只需确保首先发生。

使用jQuery播放/暂停Mousedown / up上的音频

2 个答案:

问题：

解决方案：

注释：

Live Demo