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> 元素，播放与之关联的音频，然后在音频播放完毕后删除该元素（删除它只是为了避免有很多未使用的元素，并且没有必要)

html 中的多个音频重叠

Multiple audio overlaping in html

html

mouseover

mouseevent

html5-audio