gpt4 book ai didi

Javascript循环播放多个音频

转载 作者:行者123 更新时间:2023-11-28 00:14:24 25 4
gpt4 key购买 nike

我创建 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

最佳答案

您犯的错误是,在开始下一个音频之前,您没有等待音频的 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>

关于Javascript循环播放多个音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30598073/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com