javascript - html5/javascript 音频同时播放多首轨道

标签 javascript jquery html audio web-audio-api

是否可以同时播放整个音频实例?

我知道,我可以每次创建一个新实例并在每个实例上调用 .play(),但我认为它很脏。

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

它或多或少与此线程中的相同:Play multiple sound at the same time

但必须有更优雅的方式吗?

最佳答案

编辑:MediaControllermediagroup 原来是汽件。你会想要坚持使用“肮脏”的方式来做到这一点,至少现在是这样,因为没有官方的同步解决方案。

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

[A]n attribute called @mediagroup can be added in markup to slave multiple media elements together. This is administrated in the JavaScript API through a MediaController object, which provides events and attributes for the combined multi-track object.

将两个音频文件设置为一个mediagroup。当媒体元素分配给 mediagroup 时,将为该组创建一个 MediaController。在该 Controller 上使用 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 pagecontroller Property pageplay() Method pagethe standard)

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

关于javascript - html5/javascript 音频同时播放多首轨道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21016656/

相关文章:

javascript - 如何使用<ul>显示滚动内容?

javascript - 将焦点放在魔术提示输入元素上

javascript - console.log() 没有出现在我的终端 (nwjs)

javascript - 如何在 HTML 表单验证中包含自定义字段验证功能?

php - 下拉值未循环插入数据库

javascript - 如何弹出放大动画?

html - 在 CSS 中设置 select "height"除非 "size"大于 1

javascript - 使用 onclick 或类来针对带有箭头的提交进行投票?

javascript - 检测动态页面滚动到底部

javascript - 覆盖 jQuery 选项卡 CSS