Is there a better way to sync audio with video (w/o just putting it in the video itself)?

Question

I'm trying to develop a player bar that works in animate cc, and plays both a video and animations in front of said video, on an html5 canvas.

I wanted it to speed up the audio, because the video on the screen would get really ahead, but it's playing at the right speed. So I tried this:

//Position the scrubber, handle press/release events for scrubber
this.addEventListener("tick", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler()
{
    if(isDragging == false){
        proportion = this.currentFrame/this.totalFrames;
        if(Math.round(this.currentFrame/30) % 10 == 0){ // do this every 10 seconds
            audioSync(proportion);
        }
        this.scrubber.x = scrubberStart + (proportion * barWidth);
    }
    else {
        if (stage.mouseX > scrubberStart && stage.mouseX < (scrubberStart + barWidth)) {
            proportion = (stage.mouseX-scrubberStart)/barWidth;
            this.scrubber.x = stage.mouseX;         
        }
    }
}

function audioSync(var p){
    audioInstance.setPosition(p * audioInstance.duration);

    //is there a better way to do this without it getting choppy?
    //currently sounds like 
    //fo-o-o-d-d-d S-s-aaaaffttey-y-y when set to 2 seconds 
    //(it gets off that fast)
    //it does those glitchy sounds for a few seconds when you increase the interval 
    //(if set to do it 10 seconds, ~3 seconds glitch, ~7 seconds normal)
}

Right now it kinda ends up sounding like Daft Punk when they slow down vocals and it gets really choppy. (see from 0:00 to 1:30 of "Alive 2007" track 7, "face to face / short circuit" (c)Daft Punk Legals, for a good example).

Here is demo where it's only out of sync: http://mhardingfoodsafe.github.io/player-audio-messed-up/

When I try to do audioInstance.currentTime = video.currentTime; nothing changes and when I do video.currentTime = audioInstance.currentTime; I get an error saying it can't read values that are non-finite.

this is one where it actually is doing what i'm describing (not what I want): http://mhardingfoodsafe.github.io/player-bar-v2/

Answer 1

Found it easier to just make sure that all the animations are in a video with audio so that it's less complex and stays in sync...

Why:

• Video keeps track of syncing better than animate cc can when using an html5 canvas.

• It's easier to just add video controls rather than frames, audio, and video all at once.

• less prone to errors when trying to implement over many different kinds of internet connections and devices.

it's basically the same, minus the audio sync function. Just be sure the scene has enough frames to match the video length at the fps you've set.