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

Question

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;

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?

Answer 1

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)