html5怎么可以添加多个音频然后一个接着一个播放？？、急急急

Posted 2023-04-16

就是怎么在audio里面添加多个音频文件然后一个一个播放
<audio autoplay="autopiay" controls="controls" loop="loop">
<source src="sounds/chapter1/lesson 1.wav" type="audio/wav" />
</audio>
我只会播放一个 求求大神啊啊啊啊

目前，html5<audio>标签只能同时播放一个音频文件，如何要添加多个MP3音频文件，然后按顺序一个接着一个连续播放，需要用JS代码来实现。这是实现的教程www.lmlblog.com/400.html。希望对你有用。 参考技术A 一个audio标签只能同时播放一个音频文件，希望一个接一个播放的话，就需要js监听标签的onended事件，播放完毕后，更换一个文件地址就可以了 参考技术B 直接用html5是不行的，还要用js，把你歌曲的路径放在数组里面，用js循环遍历设置歌曲路径，追问

可是我不是很会js啊 我是不是可以把很多音频合成到一个音频燃火上传？

追答

你是说用代码合，还是用，切歌器合

参考技术C js，哥哥。追问

怎么弄啊 可以帮忙打出来js吗谢谢

追答

你说具体点

参考技术D 虾米音乐网站有代码是多个播放追问

什么意思？

追答

虾米音乐里有多个音频播放的代码啊。

html5/javascript 音频同时播放多个音轨

【中文标题】html5/javascript 音频同时播放多个音轨

【英文标题】：html5/javascript audio play multiple tracks at the same time

【发布时间】：2014-01-09 09:48:19

【问题描述】：

是否可以同时播放整个音频实例？ 我知道，我可以每次创建一个新实例并在每个实例上调用 .play() ，但我认为它很脏。 喜欢sound1 = new Audio('sound1.mp3'); sound2 = new Audio('sound2.mp3); sound1.play(); sound2.play;

它或多或少与此线程中的相同：Play multiple sound at the same time 但是必须有优雅的方式吗？

【参考方案1】：

编辑：MediaController 和 mediagroup 原来是汽化器。你会想要坚持使用“肮脏”的方式来做这件事，至少现在是这样，因为没有官方的同步解决方案。

同步播放多个音频或视频对象的正确方法是使用mediagroup属性和对应的MediaController对象。见文章"HTML5 multi-track audio or video"：

[A]n 称为@mediagroup 的属性可以添加到标记中以将多个媒体元素从属在一起。这在 JavaScript API 中通过 MediaController 对象进行管理，该对象为组合的多轨对象提供事件和属性。

将两个音频文件设置为一个mediagroup。当媒体元素分配给mediagroup 时，会为该组创建MediaController。在该控制器上使用play() 方法，组中的所有媒体元素将同步播放。

以编程方式，您可以像这样分配mediagroup，然后从任何一个从属媒体元素在MediaController 上触发play()，像这样：

sound1 = new Audio('sound1.mp3');
sound2 = new Audio('sound2.mp3');
sound1.mediaGroup = 'soundGroup';
sound2.mediaGroup = 'soundGroup';
sound1.controller.play();

（来源：w3school.com 的 HTML 音频/视频 DOM mediaGroup Property page、controller Property page、play() Method page 和 the standard）

注意：我没有测试过上面的代码；请，如果您可以确认此代码不符合标准且未按预期运行，请告诉我们。请注意，您正在研究 HTML5 标准的一个非常新的方面，在这种情况下，不要期望广泛的浏览器兼容性。 （截至 2014 年 1 月）

【讨论】：

感谢分享！尝试了代码，但我发现任何主流浏览器都不支持控制器

您不需要控制器元素。只需sound1.play();

Firefox hasn't implement 既不是MediaController 也不是mediaGroup，Chromium 有unshipped it。

这个答案可能应该被再次删除 - 在撰写本文时，它只是一个草稿实验功能，并且它被杀死了，所以这永远不会关于如何做问题的问题的正确答案。最好的情况是，SO 的当前和未来的访问者不会找到这个答案，但最坏的情况是他们会找到关于做一些永远无法工作的事情的说明。