I want to play a series of sound (9-10 tracks) after I go to my website. However right now, the sounds are not played correctly. Sometimes, some of the tracks at the end are not played. Sometimes, all of the tracks are played.
Here is my code:
<script>
function init() {
var sample = document.getElementById("sample");
sample.addEventListener("ended", function() {
var ban1 = document.getElementById("ban1");
ban1.play();
});
var ban1 = document.getElementById("ban1");
ban1.addEventListener("ended", function() {
var audio1 = document.getElementById("audio1");
audio1.play();
});
var audio1 = document.getElementById("audio1");
audio1.addEventListener("ended", function() {
var silence1 = document.getElementById("silence1");
silence1.play();
});
var silence1 = document.getElementById("silence1");
silence1.addEventListener("ended", function() {
var ban2 = document.getElementById("ban2");
ban2.play();
});
var ban2 = document.getElementById("ban2");
ban2.addEventListener("ended", function() {
var audio2 = document.getElementById("audio2");
audio2.play();
});
var audio2 = document.getElementById("audio2");
audio2.addEventListener("ended", function() {
var silence2 = document.getElementById("silence2");
silence2.play();
});
var silence2 = document.getElementById("silence2");
silence2.addEventListener("ended", function() {
var ban3 = document.getElementById("ban3");
ban3.play();
});
var ban3 = document.getElementById("ban3");
ban3.addEventListener("ended", function() {
var audio3 = document.getElementById("audio3");
audio3.play();
});
var audio3 = document.getElementById("audio3");
audio3.addEventListener("ended", function() {
var silence3 = document.getElementById("silence3");
silence3.play();
});
var silence3 = document.getElementById("silence3");
silence3.addEventListener("ended", function() {
var ban4 = document.getElementById("ban4");
ban4.play();
});
var ban4 = document.getElementById("ban4");
ban4.addEventListener("ended", function() {
var audio4 = document.getElementById("audio4");
audio4.play();
});
var audio4 = document.getElementById("audio4");
audio4.addEventListener("ended", function() {
var silence4 = document.getElementById("silence4");
silence4.play();
});
var silence4 = document.getElementById("silence4");
silence4.addEventListener("ended", function() {
var ban5 = document.getElementById("ban5");
ban5.play();
});
var ban5 = document.getElementById("ban5");
ban5.addEventListener("ended", function() {
var audio5 = document.getElementById("audio5");
audio5.play();
});
var audio5 = document.getElementById("audio5");
audio5.addEventListener("ended", function() {
var silence5 = document.getElementById("silence5");
silence5.play();
});
</script>
<body onload="init();">
<audio id="ban1">
<source src="{{ url(/audio/banFile1.mp3 }}">
</audio>
<audio id="audio1">
<source src="{{ url(/audio/file1.mp3) }}">
</audio>
<audio id="silence1">
<source src="{{ url(/audio/silence/silence.mp3) }}">
</audio>
<audio id="ban2">
<source src="{{ url(/audio/banFile2.mp3 }}">
</audio>
<audio id="audio2">
<source src="{{ url(/audio/file2.mp3) }}">
</audio>
<audio id="silence2">
<source src="{{ url('/audio/silence/'.$data[1]->getSilence()) }}">
</audio>
<audio id="ban3">
<source src="{{ url(/audio/banFile3.mp3 ) }}">
</audio>
<audio id="audio3">
<source src="{{ url(/audio/file3.mp3) }}">
</audio>
<audio id="silence3">
<source src="{{ url('/audio/silence/'.$data[2]->getSilence()) }}">
</audio>
<audio id="ban4">
<source src="{{ url(/audio/banFile4.mp3 ) }}">
</audio>
<audio id="audio4">
<source src="{{ url(/audio/file4.mp3) }}">
</audio>
<audio id="silence4">
<source src="{{ url('/audio/silence/'.$data[3]->getSilence()) }}">
</audio>
<audio id="ban5">
<source src="{{ url(/audio/banFile5.mp3 ) }}">
</audio>
<audio id="audio5">
<source src="{{ url(/audio/file5.mp3) }}">
</audio>
<audio id="silence5">
<source src="{{ url('/audio/silence/'.$data[4]->getSilence()) }}">
</audio>
</body>
I think maybe because the function started when all the sounds file are not loaded fully but I already used onload. Any help would be appreciated.
question from:
https://stackoverflow.com/questions/65947407/javascript-audio-play-function-not-playing-every-sound 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
