I have a menu list in an html page. When I hover on each element it plays the hover sound, but when I hover through all of them quickly, only one or two instances are played. is there way to force all of the four instances of the hover audio to be played, so that if I move my mouse quickly over them I hear every single button I hovered on.
<audio id="hoverSound" preload="auto">
<source src="../audio/menuOptions/hoverTone.mp3" type="audio/mpeg">
</audio>
<li class="menu-list-item newGame" onmouseover="document.getElementById('hoverSound').play();" >New Game</li>
<li class="menu-list-item continue" onmouseover="document.getElementById('hoverSound').play();">Continue</li>
<li class="menu-list-item gameSettings" onmouseover="document.getElementById('hoverSound').play();">Settings</li>
<li class="menu-list-item exitGame" onmouseover="document.getElementById('hoverSound').play();">Exit</li>
I found out that playing the same audio from multiple function calls doesn't allow one sequence to overlap with another. The solution was to create a new <source> element after each click, play the audio associated to it and then remove the element once the audio finishes playing (removing it is just to avoid having a lot of unused elements and is not necessary)