html5/javascript audio play multiple tracks at the

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

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)