时间戳

首页 > 解决方案 > html中的多个音频重叠

html - html中的多个音频重叠

问题描述

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

标签： htmlmouseeventhtml5-audiomouseover

解决方案

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

推荐阅读