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

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

评论：

1. 以前，您在控制台中遇到的错误是：“错误：试图使用一个不可用或不再可用的对象。” 不断检查错误，它们非常有用:)
2. 这同样适用于动态附加的<video>标签。

现场演示

希望能有所帮助！

Answer 2

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