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 或者如果没有设置超时它会同时播放 1.wav - 2.wav - 3.wav。

我要播放 1.wav - delay - 2.wav - delay - 3.wav

Answer 1

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

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>

Javascript 循环播放多个音频

Javascript play multiple audio in loop

javascript

audio

while-loop