html5/javascript audio play multiple tracks at the same time

做~自己de王妃 提交于 2019-12-01 20:43:57

Edit: MediaController and mediagroup turned 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.

The proper way to play multiple audio or video objects synchronously is to use the mediagroup attribute and the corresponding MediaController object. See the article "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.

Set both audio files to a single mediagroup. When a media element is assigned to a mediagroup, a MediaController is 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 mediagroup like so, and then from that point trigger play() on the MediaController from 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)

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)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!