jquery - html5javascript audio play multiple tracks at the same time - Stack Overflow

admin管理员组

文章数量:1293140

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?

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?

• javascript
• jquery
• html
• audio
• web-audio-api

Share Improve this question Follow edited Nov 10, 2022 at 5:27 Oreo 55955 silver badges1717 bronze badges asked Jan 9, 2014 at 9:48 spyfxspyfx 1,35144 gold badges1616 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 bined 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.'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-pliant 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 patibility. (as of January 2014)

本文标签： jqueryhtml5javascript audio play multiple tracks at the same timeStack Overflow