有没有更好的方法将音频与视频同步(没有将其放入视频本身)?

时间:2016-05-04 15:30:38

标签: javascript html5 audio animate-cc

我正在尝试开发一个在动画cc中工作的播放器栏,并在html5画布上播放所述视频前面的视频和动画。

我希望它能加快音频速度,因为屏幕上的视频会真正领先,但它的播放速度却是正确的。所以我尝试了这个:

//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)
}

现在它有点听起来像Daft Punk当他们减慢人声时它变得非常不稳定。 (参见“Alive 2007”第7轨的0:00至1:30,“面对面/短路”(c)Daft Punk Legals,这是一个很好的例子。)

以下是只有不同步的演示:http://mhardingfoodsafe.github.io/player-audio-messed-up/

当我尝试audioInstance.currentTime = video.currentTime;时,没有任何变化 当我video.currentTime = audioInstance.currentTime;时,我得到一个错误,说它无法读取非限定值。

这是实际上我正在做的事情(不是我想要的):http://mhardingfoodsafe.github.io/player-bar-v2/

1 个答案:

答案 0 :(得分:1)

发现更容易确保所有动画都在带有音频的视频中,这样它就不那么复杂并保持同步......

为什么:

  • 使用html5画布时,视频会比动画cc更好地跟踪同步。

  • 一次添加视频控件而不是帧,音频和视频更容易。

  • 在尝试实施多种不同类型的互联网连接和设备时不容易出错。

它基本相同,减去音频同步功能。只需确保场景中有足够的帧以匹配您设置的fps的视频长度。