html5/javascript音频同时播放多个曲目

spy*_*yfx 6

是否可以同时播放整个音频实例?
我知道,我可以每次创建一个新实例并在每个实例上调用.play(),但我认为它很脏.喜欢
.play()

它或多或少与此线程相同:同时播放多个声音
但是必须有优雅的方式吗?

Dav*_*egg 6

同步播放多个音频或视频对象的正确方法是使用MediaController属性和相应的mediagroup对象.请参阅文章"HTML5多轨音频或视频":

可以在标记中添加[A] n属性@mediagroup,以将多个媒体元素连接在一起.这是通过MediaController对象在JavaScript API中管理的,MediaController对象为组合的多轨对象提供事件和属性.

将两个音频文件都设置为单个mediagroup.将媒体元素分配给a时MediaController,将mediagroup为该组创建a .使用该mediagroup控制器上的方法,组中的所有媒体元素将同步播放.

编程,你可以指定一个MediaController像这样,然后从该点触发play()mediagroup来自从媒体元素,像这样的任何一个:

sound1 = new Audio('sound1.mp3');
sound2 = new Audio('sound2.mp3');
sound1.mediaGroup = 'soundGroup';
sound2.mediaGroup = 'soundGroup';
sound1.controller.play();
Run Code Online (Sandbox Code Playgroud)

(来源:w3school.com的HTML音频/视频DOM 媒体组属性页面,控制器属性页面,播放()方法页面标准)

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

  • Firefox [尚未实现](https://bugzilla.mozilla.org/show_bug.cgi?id=847377) 既没有 `MediaController` 也没有 `mediaGroup`,而 Chromium 已经[卸载了它](https://groups.google .com/a/chromium.org/forum/#!topic/blink-dev/MVcoNSPs1UQ)。 (2认同)