how to play multiple mp3/songs in HTML? [duplicate]

问题

This question already has answers here:

HTML 5 video or audio playlist (10 answers)

Closed 3 years ago.

I'm trying to get my website to play multiple mp3/songs, but it keeps playing soundtrack1, but I want it to play all 3 songs at the same time.

This is what I currently have:

<audio loop autoplay controls>
    <source src="soundtrack1.mp3" type="audio/mpeg" loop="true">
    <source src="soundtrack2.mp3" type="audio/mpeg" loop="true">
    <source src="soundtrack3.mp3" type="audio/mpeg" loop="true">
    Your browser does not support the audio element.
</audio>

回答1:

So the HTML is as easy 1, 2, 3

<audio src="..." id="song1" volume="0.1" style="display: none;"></audio>
<audio src="..." id="song2" volume="0.1" style="display: none;"></audio>
<audio src="..." id="song3" volume="0.1" style="display: none;"></audio>

And the JS magic behind it:

for(var i = 1; i <= 3; i++)
{
    document.querySelector("#song" + i)[0].play();
}

回答2:

If you want to do it in only Javascript:

var song1  = new Audio();
var src1  = document.createElement("source");
src1.type = "audio/mpeg";
src1.src  = "soundtrack1.mp3";
song1.appendChild(src1);
song1.play();

var song2  = new Audio();
var src2  = document.createElement("source");
src2.type = "audio/mpeg";
src2.src  = "soundtrack2.mp3";
song2.appendChild(src2);
song2.play();

来源：https://stackoverflow.com/questions/35174154/how-to-play-multiple-mp3-songs-in-html