javascript - 如何停止其他声音直到一个完成(Js，HTML)

Question

我需要在网站上包含一些声音文件，我录制了它们并使用了 super 复杂的:

<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">

当用户用鼠标滚动时播放它们。网站上共有四个链接。

问题是，当我将鼠标悬停在其中一个上时它开始播放，然后如果我将鼠标悬停在另一个上它也会播放那个。如果我在链接上移动鼠标非常快，我最终会出现乱码，因为所有文件都在同时播放。我该如何阻止这个？？

理想情况是在当前播放结束之前不能播放其他的 :)

Answer 1

下面的方法。

注意，未经测试;-)

HTML

<a href="seo.html" data-file="sounds/seo.mp3" class="onmousesound">a sound link</a> -
<a href="seo.html" data-file="sounds/seo.mp3" class="onmousesound">a sound link</a> -
<a href="seo.html" data-file="sounds/seo.mp3" class="onmousesound">a sound link</a> -
<a href="seo.html" data-file="sounds/seo.mp3" class="onmousesound">a sound link</a>

JS

var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;

var onHoverPlaySound = function(element) {
 if (currentPlayedAudioInstance &&
     currentPlayedAudioInstance instanceof Audio) {

   // is playing ?
   // http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
   if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
     return false;
   }
 }

 var file = element.getAttribute('data-file');
 currentPlayedAudioInstance = new Audio(file);
 currentPlayedAudioInstance.play();
};

for (var i = 0; i < links.length; i++) {
 link.addEventListene('onmouseover', function() {
  onHoverPlaySound(links[i]);
 });
};