声音无法播放预期的时间量

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); 
}