聲音無法播放預期的時間量

Question

我試圖完成多次播放聲音效果;首先，按下按鈕觸發它，然後再次播放兩次，間隔時間爲最後的兩秒。

我現在的（相關）HTML：

<!-- AUDIO --> 
    <audio id="ring_audio" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio> 
    <audio id="ring_audio2" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio> 
    <audio id="click_audio" autostart="false" src="http://www.freesound.org/data/previews/192/192273_3509815-lq.mp3"></audio> 

    <div id="title_screen"> 
    <img src="http://data.whicdn.com/images/66375886/large.gif"> 
    <h1>Untitled.</h1> 
    <h2>a short adventure game</h2> 
    <button id="start" type="button" onclick="playClick(); fade_title(); playRing_Delay(); playRing_Stop();">Begin</button> 
    </div> 

而且我現在的javascript：

function playClick() { 
    var audio = document.getElementById("click_audio"); 
    audio.currentTime = 0.3; 
    audio.play(); 
} 
function fade_title() { 
    var titlescreen = document.getElementById("title_screen"); 
    titlescreen.style.display = "none"; 
} 
function playRing_Delay() { 
    setTimeout(function playRing() { 
     var audio = document.getElementById("ring_audio"); 
     audio.play(); 
    }, 5000); 
    setTimeout(function playRing() { 
     var audio = document.getElementById("ring_audio"); 
     audio.play(); 
    }, 7000); 
} 
function playRing_Stop() { 
    setTimeout (function playRing() { 
     var audio = document.getElementById("ring_audio2"); 
     audio.play(); 
    }, 9000); 
} 

本來，我試圖通過使用一個解決這個for循環，並保持它包含的只是到一個功能：

function playRing_Delay() { 
    setTimeout(function playRing() { 
     var audio = document.getElementById("ring_audio"); 
     for (i = 0; i < 4; i++) { 
      if i < 3 { //the first two times 
       audio.play(); //plays audio as normal 
      } 
      else { //the last time it plays 
       audio.play(); 
       setTimeout(function stopRing() { 
        audio.pause(); 
       }, 500) //stops audio after half a second 
      } 
     } 
    }, 5000); 
} 

其中，sadl y，沒有工作，所以我試圖重複第一次三次，簡單地增加等待的毫秒數，以便他們繼續正確地繼續;我不打算粘貼它，因爲基本上我只是把playRing_Stop（）的內容放在playRing_Delay（）的內部。另外，我注意到當我移動最後一環的等待期（從9000ms> 2000ms）時，它播放，接着是一個設置爲5000ms（如預期），而第二個（7000ms）沒有。

有人可以爲此提供解決方案 - 或者至少向我解釋爲什麼會發生？

注意：在我的for循環方法失敗之後，我特意在其他方法中省略了早期停止點到第三個環。

Answer 1

發生這種情況的原因是#ring_audio文件長3秒，並且您試圖在2秒後重播它。所以當你發出2nd play命令時它仍然在播放。

你應該設置其currentTime爲0，如果你想結束之前重新啓動（或重新運行play它之前等待3秒的完整）

function playRing_Delay() { 
    setTimeout(function playRing() { 
     var audio = document.getElementById("ring_audio"); 
     audio.play(); 
    }, 5000); 
    setTimeout(function playRing() { 
     var audio = document.getElementById("ring_audio"); 
     audio.currentTime = 0; 
     audio.play(); 
    }, 7000); 
}