Synchronizing Audio with HTML5
Yet another HTML5 experiment here. With the addition of native audio in HTML5, it becomes possible to accurately control the playback of audio using javascript. I was to see if two audio streams could be kept in sync so I created this little demo that allows you to toggle back and forth between a vocal and instrumental version of a song. Click the Play button below to start the music and use the Vocal and Instrumental buttons to toggle between them. Does everything stay in sync for you?
Since we’re using some HTML5 features here, you’ll need a supporting browser. The latest version of Chrome, Firefox or Safari should work nicely. Mobile Safari (iPhone/iPad) will not work as the volume property of audio objects is not supported… bummer.
As usual, view-source to see what’s going on under the hood. There’s nothing but client-side code here. In a nutshell: I’m loading two audio files using HTML5’s <audio> tag. The play/pause button starts and stops both audio files, while the vocal and instrumental buttons bring the volume up and down for each “track”. If we left it at that, the audio files would drift over time. To resolve that we have a bit of Javascript code that sets the currentTime property of the muted track to match the currentTime of the audible track every 250 milliseconds. This keeps everything in sync. I found there is an audible “pop” if you change the currentTime of an audio file while it’s actually audible, so it’s important to only adjust the currentTime of a stream while it’s silenced.
As always, comments and suggestions for improvement are very welcome.
Warren Harrison 
hi,
it doesn’t work. and there is typo in your code
L151:
if (au1.volume == 1) {
au2.currentTIme = au1.currentTime;
msg = ‘Now syncing instrumental to vocal’;
au2.currentTIme =>au2.currentTime
i have 5 mp3 track need to be synced
var tracks = [
‘http://d25fr8h8cfpz8t.cloudfront.net/334018.dat’,
‘http://d4l1bc0fqn6e0.cloudfront.net/334020.dat’,
‘http://d37bq57m152474.cloudfront.net/334022.dat’,
‘http://d3pa1qixl4c5o0.cloudfront.net/334024.dat’,
‘http://d1x11djihcke7d.cloudfront.net/334026.dat’];
could you try that?
I presume you are referring to currentTIme vs currentTime… good catch.
Does the example here not were for you?
If not, which browser are you using?
As I mention, this is pretty new stuff and only seems to work in the latest browsers. I got it working in current (as of this writing) versions of Chrome, Firefox and Safari with no problems.
i am using the latest Chrome. your example sounds perfect , but it doesn’t work with my mp3 files(5 tracks i mentioned) and enable all tracks (volume = 1)
And i found you don’t your 2 tracks at the same time.
au1.volume = 1;
au2.volume = 0;
I’m wondering if it could have anything to do with the .dat file extension. Are you able to test with the files renamed to use a .mp3 extension?
Do you have your test online somewhere? I’m curious to see what result you’re getting.
it is not available online. sorry for that , please try the follow repro code
set all volume = 1, then play, pause, play again.
i don’t know why the code can’t posted. btw, the data is mp3 file, please use it as source.
I am trying to sync multiple tracks but somehow I am not able to get the result as shown in this page.. Here is the link to my test page:
http://kukoon.com/MediaProject/AudioTest.html
I even tried ogg extention but the results are the same..
Please help me out..
Please test in google chrome.
http://kukoon.com/MediaProject/AudioTest3.html
As you can see, the audio keeps getting echoed (Because of dynamic seeks).. How do I fix this?
Hey Akshay, did you ever figure it out?
Hey nice work Warren, do you know if there is a limit to the number of tracks that can be sync’d, it’s a shame it won’t work with iPad/iPhone as that is one of the main arguments for using HTML5 audio embeds although I’m sure the has or will change very soon.
Hi –
I am trying to build a multi-track-player for musicians to practice their instrument online while listening to the rest of the band instruments.
The idea is that I have e.g. three instruments synced (drums, guitar, bass) and depending on what instrument I want to practice can mute that instrument or even more – so that for example I play (live, myself) guitar and are accompanied by drums and guitar. Then I might decide to only want to play to drums and mute the bass. Or unmute all again and play to the whole band. All synced.
I have been experimenting for a while and your approach seems promising. Although tguitars second comment might suggest otherwise.
Any idea/ code how I could realise that?
Thanks & kind regards,
carsten
I’m wondering (looking at the comments) if it has to do with the number of tracks. Try pruning to just two tracks at first to see if that keeps things in sync.
Note, also, that my method does not make both tracks audible at once, so they are likely not staying in perfect sync. They just need to sync up at the point where one is muted and the other unmuted.
Have a look at my source code to see how Im doing it:
view-source:http://hungry-media.com/code/html5-audio-sync/
Awesome!
here is a small library that handles that:
https://github.com/jeanphix/Tracks.js
It works for both and with events and and buffer handling.
Are your audio files free?
Cheers.
Great- doesn’t work in mobile safari. So just make it in flash. Oh wait… flash isn’t cool. So its a better idea if we all take a step back 10 years and reinvent the wheel once again. Wonderful.
Great!
What is the name of the song and artist?
This is my own band, Hungry Lucy. The song is called “Balloon Girl”. Stream the whole song at http://music.hungrylucy.com/track/balloon-girl
Please get name song?
What is name song?
The song is called, “Balloon Girl” by my former band, Hungry Lucy:
http://music.hungrylucy.com/track/balloon-girl
@Warren Thank you.
Hi Warren. What do you mean by “If we left it at that, the audio files would drift over time”? Did you experienced it? Although your article was 4 years ago, I’m interested to know if two tracks tend to un-sync while playing.
At the time of this writing, yes, the tracks seemed to drift if not re-synced. That surprised me.