How to stop other sounds until one finishes (Js, HTML)

Question

I need to include some sound files on a website, i recorded them and used the super complicated:

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

to play them when the user scrolls over with the mouse. There are a total of four links on the website.

The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??

Ideal would be that the others CANNOT be played until the current playing is finished :)

Answer 1

An approch below.

Note, untested ;-)

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