javascript 为什么我不能使用 HTML5 音频标签多次播放声音？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8733330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't I play sounds more than once using HTML5 audio tag?
提问by corazza
This is how the sound is "stored":
这是声音的“存储”方式：
<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio>
In the actual game (which I use sounds for), I use this to play the sound:
在实际游戏中（我使用声音），我用它来播放声音：
function playSound(soundid)
{
document.getElementById(soundid).currentTime = 0;
document.getElementById(soundid).play();
}
But the sound plays only the first time, and never again! I tried resetting the "currentTime" in the console to 0, but I literally get this:
但是声音只在第一次播放，再也不会播放了！我尝试将控制台中的“currentTime”重置为 0，但我确实得到了这个：
>document.getElementById("hammer").currentTime = 0
0
>document.getElementById("hammer").currentTime
0.340...
Why is this happening, how do I fix it?
为什么会发生这种情况，我该如何解决？
采纳答案by DTrejo
See this slideand the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.
请参阅此幻灯片以及Evan Wallace 和 Justin Ardini 关于 html5 game dev 的演示文稿的前三张幻灯片。
For all the resources to make some awesome games, part of their talk: http://madebyevan.com/gamedevclass/
对于制作一些很棒的游戏的所有资源，他们谈话的一部分：http: //madebyevan.com/gamedevclass/
Audio still doesn't work consistently across all browsers, as of right now:
- An element must be reloaded in Chrome or it will only play once
- An element must not be reloaded in Firefox or there will be a delay
到目前为止，音频仍然无法在所有浏览器中始终如一地工作：
- 元素必须在 Chrome 中重新加载，否则它只会播放一次
- 不能在 Firefox 中重新加载元素，否则会出现延迟
function playSoundEvent() {
if (window.chrome) elems[index].load()
elems[index].play()
index = (index + 1) % elems.length
}
回答by Jay
I had this issue recently with an html5. Worked everywhere except safari. Using load() before calling play() solved this problem. It also helps to make sure that sound effects do not overlap with heavy clickers when event-handlers trigger sounds.
我最近在使用 html5 时遇到了这个问题。除了 safari 外，到处都在工作。在调用 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();
});
回答by Chris Jaynes
For anyone stumbling across this post in the future, the audio tag is really not a great way to do game audio.
对于将来偶然发现这篇文章的任何人来说，音频标签确实不是制作游戏音频的好方法。
I'd highly recommend taking the time to learn the WebAudio APIinstead.
我强烈建议您花时间学习WebAudio API。
回答by Diode
A few months before I faced the same issue while developing a Piano in HTML5. When a key was pressed again and again I had to stop, rewind and play the audio on each key press. I used the same code written in this question which worked in Firefox and Safari, but not in Chrome. In Chrome it didn't play again. Finally I had to modify the code to make it work. Added one listener for the event onseeked, then set currentTime = 0and in the event handler invoked play. This worked for me. Similarly I had to wait for the event of one action before giving next action in many places. It was an old version of Chrome. Later I found out that even some versions of Browsers support Audio, the way each one supports is slightly different. This difference won't be visible if we simply put an audio tag and play the audio, but will experience when we try to control the audio using Javascript. Anyways its all about older versions of Browsers, its much much better in all latest versions. So please check in the latest version of Chrome ( Even my piano worked in Chrome 10 without the code modification ) and regarding the audio format, I would suggest you to keep mp3 and ogg files of your audio instead of single wav file.
几个月前，我在用 HTML5 开发钢琴时遇到了同样的问题。当一个键被一次又一次按下时，我不得不停止、倒带并在每次按键时播放音频。我使用了在这个问题中编写的相同代码，该代码在 Firefox 和 Safari 中有效，但在 Chrome 中无效。在 Chrome 中它没有再次播放。最后我不得不修改代码以使其工作。为事件添加了一个侦听器onseeked，然后设置currentTime = 0并在调用的事件处理程序中play. 这对我有用。同样，我不得不等待一个动作的事件，然后才能在许多地方给出下一个动作。这是旧版本的 Chrome。后来发现有些版本的浏览器都支持Audio，每个版本支持的方式都略有不同。如果我们简单地放置一个音频标签并播放音频，这种差异将不可见，但是当我们尝试使用 Javascript 控制音频时会体验到。无论如何，它都是关于旧版本的浏览器，在所有最新版本中都要好得多。所以请检查最新版本的 Chrome（即使我的钢琴在没有代码修改的情况下也能在 Chrome 10 中工作），关于音频格式，我建议您保留音频的 mp3 和 ogg 文件，而不是单个 wav 文件。
