Javascript循环播放多个音频

Question

我创建 html 和 javascript 来播放声音号码:

<audio id="audio_0" src="0.wav" ></audio>
<audio id="audio_1" src="1.wav" ></audio>
<audio id="audio_2" src="2.wav" ></audio>
<audio id="audio_3" src="3.wav" ></audio>
<audio id="audio_4" src="4.wav" ></audio>
<audio id="audio_5" src="5.wav" ></audio>
<audio id="audio_6" src="6.wav" ></audio>
<audio id="audio_7" src="7.wav" ></audio>
<audio id="audio_8" src="8.wav" ></audio>
<audio id="audio_9" src="9.wav" ></audio>
Number:
<input type="text" name="number" id="number" size="40">
<button onclick="playSound()">Sent</button>

 <script type="text/javascript">
  function playSound() {
    var number = document.getElementById('number').value;
    var sound;
    var i = 0;
    if (number <= 999) {
      while(i < number.length) {
        sound = document.getElementById("audio_"+number.substring(i, i+1));           
        setTimeout(function() {
          sound.play();
        } ,1000);
        i++;
      }
    }
  }
</script>

但是当输入数字(例如123)时，它会播放3.wav，或者如果没有setTimeout，它会播放1.wav - 2.wav - 3。 wav 同时。

我希望它播放1.wav - 延迟 - 2.wav - 延迟 - 3.wav

Answer 1

您犯的错误是，在开始下一个音频之前，您没有等待音频的 ending 事件，而且我假设您没有显示音频元素的控件，那么您可以将其简化为单个音频元素并执行以下操作:

Number:
<input type="text" name="number" id="number" size="40">
<button onclick="playSound()">Sent</button>

<script type="text/javascript">
    var audio = new Audio(), srcList = [], number;
    for(var i=0;i<10;i++) srcList.push(i+'.wav');     //Replace
    function playSound(){
        number = document.getElementById('number').value;
        audLoop(0);
    }

    function audLoop(i){
        if(!number || i>=number.length || !srcList[number[i]]) return;
        audio.src = srcList[number[i]];
        audio.play();
        i++;
        if(srcList[number[i]]){
            audio.onended = setTimeout( audLoop.bind(null, i), 1000);   // for Delay
        }else{
            audio.onended = null;
        }
    }

</script>