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

Question

我正在尝试使用 jQuery 动态地将监听器分配给 anchor ，以便在 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>动态附加的标签。

Live Demo

希望有帮助!