html 中的多个音频重叠

Question

我在html页面中有一个菜单列表。当我将鼠标悬停在每个元素上时，它会播放悬停声音，但是当我快速将鼠标悬停在所有元素上时，只播放一两个实例。有没有办法强制播放悬停音频的所有四个实例，这样如果我将鼠标快速移动到它们上面，我会听到我悬停的每个按钮。

<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>

Answer 1

我发现从多个函数调用中播放相同的音频不允许一个序列与另一个序列重叠。解决方案是在每次单击后创建一个新的<source>元素，播放与其关联的音频，然后在音频完成播放后删除该元素(删除它只是为了避免有很多未使用的元素，不是必需的(