Multi-Track synced player

683 views
Skip to first unread message

jpreston

unread,
Jan 4, 2011, 7:22:53 PM1/4/11
to jPlayer: HTML5 Audio & Video for jQuery
I have a project that requires multiple mp3 files to be synced
together when playing. I've gotten the multi-instance player part
working just fine, and I can start and stop all players with a single
button, but they just seem to be milliseconds off from each other.
Does anyone have any advice on how to get all the files to sync when
playing? Thanks!!

Mark Panaghiston

unread,
Jan 5, 2011, 5:09:23 PM1/5/11
to jpl...@googlegroups.com
Have you tried using the constructor option?:
{preload: "auto"}

Assuming you are not auto playing the 3 tracks to on page load, that should help.

The other idea is that you are playing and pausing them... Without any time parameter. This would introduce errors over time. One track would have to be a master reference... So when you pause all 3, get the time from the master and then use that time for the next play(time) send to all 3.

You can get the time paused from the pause event object. Likewise, I expect the master would need to control the ended event and issue a play(0) to all 3 tracks. Well, if your tracks a loops.

Best regards,
Mark P.

jpreston

unread,
Jan 5, 2011, 6:56:06 PM1/5/11
to jPlayer: HTML5 Audio & Video for jQuery
Hey Mark,
Thanks for your response! My current test environment has 22 tracks.
I made the changes you suggested and it seems to sync ok but not
great. I threw my test project on some of my web space here:
http://driverstestpractice.com/sandbox/
In the final production version there will only be a single progress
par and only volume controls for each track. Please let me know if
you have any other suggestions or if you think this might be a project
that I could hire happyworm to consult on. Thanks!

-Jonathan P.

On Jan 5, 2:09 pm, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

Mark Panaghiston

unread,
Jan 5, 2011, 7:18:29 PM1/5/11
to jpl...@googlegroups.com
The swfPath is wrong in that link.

You will need to set it to the current directory...
{swfPath:"./"}

That is: dot slash.

I was going to suggest that you checked how well the flash worked with:
{solution:"flash, html"}

By the way, mobile browsers like iOS do not support more than 1 track at a time.

I will review the site on Safari and chrome for now.

Best regards,
Mark P.

Mark Panaghiston

unread,
Jan 5, 2011, 7:51:57 PM1/5/11
to jpl...@googlegroups.com
I noticed in chrome (win) that the 1st track was the one that lost synch.

The reason why?
You need to give the pause(time) to the 1st instance too. Least I think... The pause(time) command actually sets the currentTime, which is then rounded a bit by the browser's player. This is most noticeable in video, where the closest IFRAME is selected (except on chrome, which just shows you the junk corrupt image at the point.)

i see a problem though with the event you picked...
$.jPlayer.event.loadeddata
Will only work with HTML5. I have not implemented that event in the Flash yet. There are many events the Flash does not emulate yet because launch and then evolve jPlayer to include all the less common events in the Flash.

I suggest you use the progress event instead and check that the:
event.jPlayer.status.seekPercent === 100.

Most browsers will jump to 100 pretty quickly though. The Flash will definitely have loaded the media... And Safari 4+ on Win.

In chrome, the browser appears to require a large amount to buffer before it can play. Not sure why. Chrome goes from being poor to good and then plain annoying as they have developed their html5 media. I can crash chrome on OSX and Win if i want with jPlayer, by doing a totally redundant set of commands in a particular event. It worked in pure JavaScript too, so nothing to do with jPlayer. No other browser had this problem. It took about a day to narrow down the command that was doing it inside jPlayer too, which is now correct of course, or rather, not performed on Webkit. jPlayer can't control the external code though :(

Oops. Started ranting about Chrome.

In an update I plan to enable access to the buffered information. So we will get the loadPercent again. One thing though, it is actually quite tricky to get the real load percent when it could be broken up into 500 chunks of a few seconds here all over the place... Which is the extreme case. Normally it would just be 1 value to compare if you were not seeking to new points though.

Best regards,
Mark P

jpreston

unread,
Jan 5, 2011, 8:22:04 PM1/5/11
to jPlayer: HTML5 Audio & Video for jQuery
Hey Mark,

The flash version seems to work great! I am still very interested in
seeing if anything can be done to sync up the html version.

Flash version: http://driverstestpractice.com/sandbox/
HTML version: http://driverstestpractice.com/sandbox/index2.php

Thanks again for your help!

-Jonathan P.
Reply all
Reply to author
Forward
0 new messages