如何使HTML5音頻播放一次點擊？

Question

我正在對合成語音進行在線評估調查。部分測試要求聽衆只能聽到一個給定的WAV文件播放一次（作爲實驗控制）。

我已經想通了如何簡單地嵌入與對照組音頻剪輯，以便它可以被打過幾次：

<audio controls> 
    <source src="http://mypage.com/my_sound.wav" type="audio/wav"> 
    Your browser does not support the audio element 
    </audio> 

而且，我已經看到了一些HTML的問題都試圖解決的HTML音頻播放錯誤回來只有一次：

Audio played once only in Google Chrome in html

JavaScript + HTML5: Audio will only play once under certain circumstances

如何有史以來，我的問題是如何編寫代碼（只需點擊一次就可以播放HTML音頻）？我見過的所有東西都把它看作是一個要修復的錯誤，而不是一個有意識的目標。

乾杯！

Answer 1

我一直在尋找這一個。

您有幾個選項。

這個停止的關鍵是冒險的事件，正如你所期望的，當脂肪女士停止唱歌時觸發。

<audio id="gilda"> 
    <source url="epic-aria.mp3"> 
</audio> 

var fatLady = document.getElementById('gilda'); 
fatLady.onended = function() { 
    fatLady.pause(); 
    fatLady.currentTime = 0; // << only needed if you're cutting off the sound misstep (before the end) and need to return to the beginning - but you might need it. Since you are doing some gaming, I figured that might come up... 
}; 

還有一種jQuery的方式，我目前正在使用。但jQuery不會使用 - 但它使用結束，而不是...

var fatLady = $('#gilda'); 
fatLady.bind('ended', function(event) { 
    fatLady 
    .pause() 
    .currentTime = 0; // << haven't field-tested this yet, but jquery didn't yell at me about it. 

}); 

讓我知道如果你遇到任何打嗝。