6

Is it possible to play the whole audio instance at the same time?

I know, I could create every time a new instance and call .play() on every instance, but I think it's dirty.

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

It's more or less the same as in this thread: Play multiple sound at the same time

But there has to be a more elegant way?

Oreo
  • 529
  • 3
  • 16
spyfx
  • 1,311
  • 4
  • 14
  • 24

1 Answers1

6

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)

David Michael Gregg
  • 270
  • 2
  • 11
  • thanks for sharing! tried out the code but I figuerd out that the conroller isnt supported in any major browser – spyfx Jan 14 '14 at 12:46
  • 1
    You do not need the controller element. Just `sound1.play();` – Wes Modes Mar 01 '15 at 07:46
  • 2
    Firefox [hasn't implement](https://bugzilla.mozilla.org/show_bug.cgi?id=847377) neither `MediaController` nor `mediaGroup`, and Chromium has [unshipped it](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/MVcoNSPs1UQ). – Alexander Wallin Dec 16 '16 at 15:28
  • 1
    This answer should probably be deleted again - At the time of writing it was a draft-only experimental feature, and it got killed off, so this is _never_ going to be a proper answer to the question on how to do what the question was about. At best, current and future visitors to SO won't find this answer, but at worst they do and find instructions on doing something that can't ever work. – Mike 'Pomax' Kamermans Mar 24 '19 at 00:42