p5.js sound: Playing back files in sync

Andreas_Ref

Hi

I have a p5js sketch, where I want to play back four individual mp3 tracks in sync. I can get them to play, but they are of in terms of sync when I run the sketch. I know that the files themselves are in perfect sync.

Here is my code so far.

var bass, drums, guitar, vox;

function preload() {

bass = loadSound('data/bass.mp3');
drums = loadSound('data/drums.mp3');
guitar = loadSound('data/guitar.mp3');
vox = loadSound('data/vox.mp3');

}

function setup() {
createCanvas(1350, 1045);

bass.play();
drums.play();
guitar.play();
vox.play();
}

function draw() {

}

Any ideas?

georgehenryrowe

I would guess that because you are dropping frames then they are falling out of sync. Maybe try to log out your framerate? If that isn't going too low then it's something else.

Andreas_Ref

Yeah, that is not it. Framerate is high and steady.

jeremydouglass

Are the syncs drifting, or is it a fixed offset -- like some start later than others? Perhaps after play you could try forcing them all to the same frame....

Andreas_Ref

It seems like they start at different times. Any good techniques for forcing them to start in sync?

GoToLoop

https://GitHub.com/processing/p5.js-sound/issues

georgehenryrowe

You could try using jump() to start them all at the same time at the beginning of your draw, and/or use addCue() to add cue points and conditionals to start them all playing at the same cue point.

Andreas_Ref

@GoToLoop there is a similar issue on github, but the solution suggested at https://github.com/processing/p5.js-sound/issues/250 does not improve the sync in my case.

@georgehenryrowe I tried jump() for all of them when I press a key, but they are still out of sync. I just tested all of the files in Garageband, and they are in perfect sync in there...

jeremydouglass

Not sure if this is at all related, but I do know that web audio sync in javascript is a challenge in general, and that many problems generally arise when you use the wrong clock....

https://www.html5rocks.com/en/tutorials/audio/scheduling/

Andreas_Ref

Hi jeremydouglass

That could very well be the issue. Any idea how to implement that in p5.js?

jeremydouglass

Unfortunately no -- I don't have any experience in js audio sync projects, so your first guesses would be as good as mine. I would probably start by looking at another sync solution in plain js, confirm that it works outside a p5.js context, then poke around in the library to see what it does:

https://github.com/processing/p5.js-sound

Of course, ideally, someone experienced with p5.js sound would come along and answer this question from personal experience...!