为什么我不能使用 HTML5 音频标签多次播放声音？答案

【问题标题】：Why can't I play sounds more than once using HTML5 audio tag?为什么我不能使用 HTML5 音频标签多次播放声音？
【发布时间】：2012-02-02 17:39:51
【问题描述】：

这就是声音“存储”的方式：

<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio>

在实际游戏中（我使用声音），我用它来播放声音：

   function playSound(soundid)
   {
        document.getElementById(soundid).currentTime = 0;
        document.getElementById(soundid).play();
   }

但声音只播放第一次，以后再也不会！我尝试将控制台中的“currentTime”重置为 0，但我真的明白了：

>document.getElementById("hammer").currentTime = 0
0
>document.getElementById("hammer").currentTime
0.340...

为什么会发生这种情况，我该如何解决？

【问题讨论】：

可能是wav文件？这在 Chrome 上对我来说很好用：jsfiddle.net/xWFuq。（不要介意声音文件；这是我能找到的最短的文件。）
但这怎么可能呢？无论如何，也许是我的电脑的问题，我会在一台服务器上运行它并在另一台服务器上测试它......
我不知道；有时我的 Chrome 突然拒绝播放任何 <video>（尚未使用 <audio> 进行测试）；甚至 UI 控件也有点冻结。当我重新启动 Chrome 时，这一切都解决了。
所有浏览器都会出现这种情况吗？
我没有在 Chrome 以外的任何浏览器中测试过它。等一下，我会的。编辑：我的 Firefox 版本不支持 HTML5...

标签： javascript html audio html5-audio

【解决方案1】：

几个月前，我在用 HTML5 开发钢琴时遇到了同样的问题。当一个键被一次又一次按下时，我不得不停下来，倒带并在每次按键时播放音频。我使用了在这个问题中编写的相同代码，该代码在 Firefox 和 Safari 中有效，但在 Chrome 中无效。在 Chrome 中它没有再次播放。最后我不得不修改代码以使其工作。为事件onseeked 添加了一个侦听器，然后设置currentTime = 0 并在事件处理程序中调用play。这对我有用。同样，我必须等待一个动作的事件发生，然后才能在许多地方执行下一个动作。它是旧版本的 Chrome。后来我发现即使是某些版本的浏览器也支持音频，每个版本支持的方式都略有不同。如果我们简单地放置一个音频标签并播放音频，这种差异将不可见，但当我们尝试使用 Javascript 控制音频时会体验到这种差异。无论如何，它都是关于旧版本的浏览器，它在所有最新版本中要好得多。所以请检查最新版本的 Chrome（即使我的钢琴也可以在 Chrome 10 中工作而无需修改代码），关于音频格式，我建议您保留音频的 mp3 和 ogg 文件，而不是单个 wav 文件。

【讨论】：

【解决方案2】：

见this slide和Evan Wallace and Justin Ardini's presentation on html5 game dev的前三张幻灯片。

对于制作精彩游戏的所有资源，他们的谈话的一部分：http://madebyevan.com/gamedevclass/

截至目前，音频仍然无法在所有浏览器中始终如一地工作：

一个元素必须在 Chrome 中重新加载，否则它只会播放一次

不得在 Firefox 中重新加载元素，否则会出现延迟

function playSoundEvent() {
  if (window.chrome) elems[index].load()
  elems[index].play()
  index = (index + 1) % elems.length
}

【讨论】：

感谢您提供的重要信息！我会测试一下这个功能，我可能会接受你的回答。
（我自己没试过，但这些人都是老板，所以我希望他们的东西是正确的:)
为什么会这样？我需要重新下载整个音频文件才能第二次播放是不是有点迟钝？
@user2486570 是的，但您可以使用“Cache-Control”http 标头进行缓存 - 这样就不会再次下载文件

【解决方案3】：

我最近在使用 html5 时遇到了这个问题。除了野生动物园外，到处工作。在调用 play() 之前使用 load() 解决了这个问题。当事件处理程序触发声音时，它还有助于确保声音效果不会与沉重的点击器重叠。

Here what I used
<audio id="sound-one" preload="auto">
    <source src="http://myurl/foo.mp3"></source>
    <source src="http://myurl/foo.ogg"></source>
</audio>


<a href="#" id="navigation-id">click here</a>  



Jquery
$("#navigation-id") //this attached is to an element on the page
.mouseover(function() {
    sound-one.load();                               
    sound-one.play();
    });

【讨论】：

【解决方案4】：

对于以后偶然发现这篇文章的人来说，音频标签确实不是制作游戏音频的好方法。

我强烈建议您花时间学习 WebAudio API。

【讨论】：