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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21016656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:49:58  来源:igfitidea点击:

html5/javascript audio play multiple tracks at the same time

javascriptjqueryhtmlaudioweb-audio-api

提问by spyfx

Is it possible to play the whole audio instance at the same time?
I know, I could create every time an new instance and call .play() on every instance, but I think its dirty. like
sound1 = new Audio('sound1.mp3');
sound2 = new Audio('sound2.mp3);
sound1.play();
sound2.play;

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

Its more or less the same as in this thread: Play multiple sound at the same time
But there has to be and elegant way?

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

回答by David Michael Gregg

Edit: MediaControllerand mediagroupturned out to be vaporware. You will want to stick with the "dirty" way to do it, at least for now, as there is no official syncing solution.

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

The proper way to play multiple audio or video objects synchronously is to use the mediagroupattribute and the corresponding MediaControllerobject. See the article "HTML5 multi-track audio or video":

同步播放多个音频或视频对象的正确方法是使用mediagroup属性和对应的MediaController对象。参见文章“HTML5 多轨音频或视频”

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

Set both audio files to a single mediagroup. When a media element is assigned to a mediagroup, a MediaControlleris created for that group. Use the play()method on that controller and all media elements in the group will play synchronously.

Programmatically, you can assign a mediagrouplike so, and then from that point trigger play()on the MediaControllerfrom any one of the slave media elements, like so:

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

(Sources: w3school.com's HTML Audio/Video DOM mediaGroup Property page, controller Property page, play() Method page, and the standard)

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

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

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

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

(来源:w3school.com 的 HTML Audio/Video DOM mediaGroup 属性页控制器属性页play() 方法页,以及标准

NOTE: I haven't tested the above code; please, if you can confirm that this code is not standard-compliant and does not function as expected, let us know. Be aware that you are looking at a very new aspect of the HTML5 standard, and this being the case, do not expect broad browser compatibility. (as of January 2014)

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