javascript - 不间断地为菜单的每个元素添加悬停时的声音

Question

正如我所说，我创建了一个菜单，当我悬停它时会显示声音。我使用的代码在悬停菜单的另一个元素后播放声音之前有一个短暂的停顿。我怎样才能同时播放它，我的意思是，我怎样才能去除暂停效果？

$(document).ready(function() {
  var beepOne = $("#beep-one")[0];
  $("#menu-glowne a")
    .mouseenter(function() {
      beepOne.pause();
      beepOne.play();
    });

});

<audio id="beep-one" controls="controls" preload="auto">
  <source src="http://localhost/wp-content/uploads/2016/04/Click2-Sebastian-759472264.mp3"></source>
  <source src="http://localhost/wp-content/uploads/2016/04/Click2-Sebastian-759472264.wav"></source>
</audio>

<ul id="menu-glowne">
  <li><a href="#">One</a>
  </li>
  <li><a href="#">Two</a>
  </li>
  <li><a href="#">Three</a>
  </li>
</ul>

Answer 1

用 setTimeOut 或 jQuery .delay() 替换暂停。 300 毫秒超时示例:

$(document).ready(function() {
  var beepOne = $("#beep-one")[0];
  $("#menu-glowne a")
    .mouseenter(function() {
      setTimeout(function() {
        beepOne.play();
      }, 300);
    });
});

我不知道新声音是否会抵消之前的声音。

此外，如评论所述，未经通知播放声音是一种糟糕的用户体验。您最好默认禁用它并询问用户，或者让他们通过复选框或其他方式启用它。