如何在 HTML 中播放多个 mp3/歌曲？ [复制]答案

【问题标题】：how to play multiple mp3/songs in HTML? [duplicate]如何在 HTML 中播放多个 mp3/歌曲？ [复制]
【发布时间】：2016-05-12 11:29:53
【问题描述】：

我正在尝试让我的网站播放多首 mp3/歌曲，但它一直在播放配乐1，但我希望它同时播放所有 3 首歌曲。

这是我目前拥有的：

<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>

【问题讨论】：

标签： javascript html html5-audio

【解决方案1】：

所以 HTML 很简单 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>

以及它背后的 JS 魔法：

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

【讨论】：

【解决方案2】：

如果您只想使用 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();

【讨论】：