Javascript音頻循環

我想在背景中播放3次音頻，3次後音頻將自動停止。我試過這段代碼，它沒有工作。 HTML代碼：Javascript音頻循環

<audio id='beep' controls> 
<source src="beep-02.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio>

JAVASCRIPT：

var count = 1 
document.getElementById('beep').addEventListener('ended', function(){ 
    this.currentTime = 0; 
    if(count <= 3){ 
     this.play(); 
    } 
    count++; 
}, false);

感謝。

來源

2016-01-21 Jack

[這是一個重複（https://stackoverflow.com/questions/15423040/html5-play-audio-loop-4x-then-stop）。 – 2016-01-21 17:38:56

當你說它不起作用時，它做了什麼？ – jasonwarford

它可能肯定是重複的，但接受的答案是可疑的。除非你真的不能依賴'ended'事件，否則我不認爲你需要依賴'setInterval或setTimeout'來匹配音頻的持續時間。 – mczepiel

你可以嘗試使用onended：參考：http://www.w3schools.com/tags/av_event_ended.asp或者它可能是你需要再次增加你的計數調用播放（前）

var count = 1; 
var audio = document.getElementById('beep'); 
audio.onended = function() { 
    if(count <= 3){ 
     count++; 
     this.play(); 
    } 
};

來源

2016-01-21 17:41:23 Rosenumber14

添加一個偵聽器爲'結束'事件或爲'onended'設置一個顯式處理程序應該沒有功能差異... – mczepiel

我不是100％確定，但是如果您使用事件偵聽器，我認爲您必須調用bind ）爲了在函數內部使用'this'？例如：audio.addEventListener（'keydown'，function（e）{this.handle_keydown（e）; } .bind（this），false）; 參考：http://stackoverflow.com/questions/13996263/javascript-scope-addeventlistener-and-this – Rosenumber14

不，函數的上下文this將被設置爲事件的currentTarget在這種情況下，這將是音頻元素。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener「使用addEventListener（）將處理函數附加到元素時，處理函數內部的值是對元素的引用。它與傳遞給處理函數的event參數的currentTarget屬性的值相同。「 – mczepiel

試試這個：

var count = 0; 
document.getElementById('beep').addEventListener('ended', function(){ 
    if(count <= 3){ 
     this.play(); 
     count++; 
    } 
}, false);

來源

2016-01-21 17:40:11 Tomas

1）如果你確實想在後臺玩，你還需要添加一個autoplay屬性。

<audio id='beep' controls autoplay> 
    <source src="beep-02.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio>

2）這應該工作，你撰寫非常多，但在某些瀏覽器可能需要重置播放頭，如果你會：this.currentTime = 0

JAVASCRIPT：

var count = 0 
document.getElementById('beep').addEventListener('ended', function(){ 
    count++; 
    if (count < 3) { 
    this.currentTime = 0; // may be needed in some browsers to reset 
    this.play(); 
    } 
}, false);

爲了記錄我以前有建議使用loop屬性，並在ended之後簡單停止發射3次，但是當我測試它時，loop會阻止ended發射。

例 http://jsfiddle.net/jorw3yfn/

來源

2016-01-21 17:47:46 mczepiel

Javascript音頻循環

回答

相關問題