Is there a way to play multiple audio files synchronised in html5?

Question

We record at the conference rooms, where we have multiple speaker conversations. Each speaker has a personal microphone attached and speech from each microphone is recorded as a separate channel(separate audio file).

Our goal is to allow a user to play all the audios(channels) at once. We may have up to 12 separate files. Additionally, we need a user to be able to control the volume of each stream (so just merging files on the backend is not a solution).

What could we use to achieve that? A naive solution to play them all at once is probably not going to work, so we want to know if this kind of challenge was addressed by modern html5 APIs.

--- UPDATE to answer @Amdadan's comment ---

Why not? DId you try it? Are you worried about connection throughput, if you are streaming them? Are you worried about API restrictions?

Yes, we tried. 1) When we call 'play' on all the files - it doesn't start all at the same moment(it starts loading them all, one loads faster, one loads slower, etc). 2) When it's already playing and the file reaches the end of "buffered" time - it also stops while others continue playing.

We tried to use events for handling those cases, but we did not succeed in it - there are a lot of cases to handle.

Are you worried about size, if you load them all up before playing?

Yes, we are. Files can be a couple of hours in length - it can not all be buffered.

Are you worried about connection throughput, if you are streaming them? Are you worried about API restrictions?

No, we use CloudFront connected to s3 - the throughput is ok and there are no specific restrictions

---

Thank you in advance, - Jack

Answer 1

whatever you opt for make sure there's 0ms delay between the tracks, as this might create phase issues and comb filtering. (for the non audio guys and gals, these issues sounds really bad)

WebM seems to be using Matroska which support multi-track. Details in the link below.

Multi Track Audio (and Video) HTML5

Also check Howler.js, which supports multi-track playback and I think it suits best your needs.

Howler.js on GitHub

Answer 2

Maybe using the MediaSync library is an option for you. It allows you to sync two <video/> elements as shown on their page. But that should work with audio as well.