Question

我需要在网站上包含一些声音文件，我记录它们并使用超级复杂的文件：

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

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

问题是，当我将鼠标悬停在其中一个上面时，它开始播放，然后如果我鼠标悬停在另一个上面，它也会播放那个。如果我快速移动鼠标链接我最终得到Giberish因为所有文件同时播放。我怎么阻止这个？

理想的是，在当前比赛结束之前，其他人不能被播放:)

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

如何在一个完成之前停止其他声音（Js，HTML）

1 个答案: