1

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/

Mike
  • 48
  • 1
  • 14
  • Possible Help: http://stackoverflow.com/questions/6433900/syncing-html5-video-with-audio-playback?rq=1 – Riddell May 04 '16 at 15:38
  • I just tried doing that, but it doesn't like it for some reason. they play at separate rates still. (tried in audioSync() in the "tick" listener, and in the tick listener, but outside of the "do this every 10 seconds" condition) :/ – Mike May 04 '16 at 15:46
  • Have you tried reversing it so you sync video to audio instead ? I can't really help because I don't know the situation well enough – Riddell May 04 '16 at 15:49
  • right, I've nearly got a demo for ya :) when I did that yesterday, it strobed the video. I could try it again in a different spot to see if it helps it, but I'll post the demo first – Mike May 04 '16 at 15:51
  • Okay Mike. It's a lot easier for people to test and experiment when demo's are given. This makes the debugging process and arriving to answer a lot quicker. – Riddell May 04 '16 at 15:55
  • ok, so it's A demo, but I can't get it to do the glitchy audio that it does when I'm testing it locally. it gets out of sync still, but I'll work on recreating the other issue http://mhardingfoodsafe.github.io/player-audio-messed-up/ – Mike May 04 '16 at 16:07

1 Answers1

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.

Mike
  • 48
  • 1
  • 14