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

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?

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

4 个解决方案

#1

See this slide and the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.

请参阅此幻灯片以及前面三张Evan Wallace和Justin Ardini关于html5游戏开发的演示文稿。

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

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

An element must not be reloaded in Firefox or there will be a delay

不得在Firefox中重新加载元素,否则会有延迟

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

#2

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解决了这个问题。到处都工作,除了野生动物园。在调用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();
    });

#3

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 API instead.

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

#4

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 = 0 and 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文件。

#1