使用jQuery播放/暂停鼠标向下/向上的音频

Question

我试图使用jQuery动态地将侦听器分配给锚，以便在鼠标向下播放声音，在鼠标上暂停。这是我的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">中，这时它就崩溃了。我把我的网站的一个样本粘贴到小提琴中，在那里你可以尝试删除div，并看到它在没有它的情况下工作。

Answer 1

就在我睡觉后我意识到了这个问题。最近，我编写了一个脚本，将作者姓名的每个实例的文本更改为他们的帖子列表的链接。为此，它用一个新字符串替换每个p元素的内容，这意味着它重新创建了我正在处理的锚和音频。我想我得先确认一下。

Answer 2

问题：

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

解决方案：

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

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

评论：

1. 在此之前，您在控制台中得到的错误是：“错误:尝试使用一个不再可用或不再可用的对象。”请继续检查错误，它们非常有用:)
2. 同样的情况也适用于动态追加的<video>标记。

现场演示

希望这能帮上忙！