Hi makenzi.exc,
Refer below example.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript: Play multiple audio files in sequence</title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<input type="button" value="Play" onclick="Play()" />
<hr />
<span id="lblMessage"></span>
<script>
function Play() {
const audios =
[
'https://www.aspsnippets.com/audio/welcome.mp3',
'https://www.aspsnippets.com/audio/welcome.mp3',
'https://www.aspsnippets.com/audio/welcome.mp3'
];
// Playing audio
var index = 0;
document.getElementById("lblMessage").innerHTML = "Playing audio " + (index + 1) + ".";
var audio = PlayAudio(audios[index]);
audio.addEventListener('ended', function () {
index++;
if (index < audios.length) {
document.getElementById("lblMessage").innerHTML = "Playing audio " + (index + 1) + ".";
audio.src = audios[index];
audio.play();
}
});
};
function PlayAudio(src) {
var audio = new Audio(src);
audio.play();
return audio;
};
</script>
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
