為什么我不能使用HTML5音頻標簽多次播放聲音？

Question

這就是“存儲”聲音的方式：

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

為什么會發生這種情況，我該如何解決？

Answer 1

請參閱此幻燈片以及前面三張Evan Wallace和Justin Ardini關於html5游戲開發的演示文稿 。

對於制作一些精彩游戲的所有資源，他們的談話的一部分： http ： //madebyevan.com/gamedevclass/

截至目前，音頻仍無法在所有瀏覽器中保持一致：

• 必須在Chrome中重新加載元素，否則它只會播放一次
• 不得在Firefox中重新加載元素，否則會有延遲

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

Answer 2

我最近用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();
    });

Answer 3

對於未來在這篇文章中磕磕絆絆的人來說，音頻標簽實際上並不是制作游戲音頻的好方法。

我強烈建議花時間學習WebAudio API 。

Answer 4

幾個月前我在HTML5中開發鋼琴時面臨同樣的問題。 當一次又一次按下一個鍵時，我不得不停下來，倒回並在每次按鍵時播放音頻。 我使用了這個問題中編寫的相同代碼，該代碼在Firefox和Safari中有效，但在Chrome中沒有。 在Chrome中它不再播放。 最后，我不得不修改代碼以使其工作。 為onseeked事件添加了一個偵聽onseeked ，然后設置currentTime = 0並在事件處理程序中調用play 。 這對我有用。 同樣地，我必須等待一個動作的事件，然后在許多地方進行下一個動作。 這是Chrome的舊版本。 后來我發現即使某些版本的瀏覽器也支持Audio，每個版本支持的方式也略有不同。 如果我們只是放一個音頻標簽並播放音頻，這種差異將不可見，但是當我們嘗試使用Javascript控制音頻時會遇到這種差異。 無論如何，它都是關於舊版本的瀏覽器，它在所有最新版本中都要好得多。 所以請檢查最新版本的Chrome（即使我的鋼琴在Chrome 10中工作，沒有修改代碼），關於音頻格式，我建議你保留音頻的mp3和ogg文件，而不是單個wav文件。