有没有更好的方法将音频与视频同步（不只是将其放入视频本身）？

Posted 2023-02-16

【中文标题】有没有更好的方法将音频与视频同步（不只是将其放入视频本身）？

【英文标题】：Is there a better way to sync audio with video (w/o just putting it in the video itself)?

【发布时间】：2016-08-30 03:39:12

【问题描述】：

我正在尝试开发一个在动画 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)

现在，当他们放慢人声并且变得非常波涛汹涌时，它最终听起来有点像愚蠢朋克。 （参见“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/

【问题讨论】：

可能的帮助：***.com/questions/6433900/…

我只是尝试这样做，但由于某种原因它不喜欢它。他们仍然以不同的价格播放。 （在“滴答声”侦听器和滴答声侦听器中尝试了 audioSync()，但在“每 10 秒执行一次”条件之外）：/

您是否尝试过反转它以便将视频同步到音频？我真的帮不上忙，因为我不太了解情况

对，我几乎为你准备了一个演示 :) 当我昨天这样做时，它闪现了视频。我可以在不同的地方再试一次，看看是否有帮助，但我会先发布演示

好的，迈克。当提供演示时，人们测试和实验要容易得多。这使得调试过程和到达答案的速度更快。

【参考方案1】：

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

为什么：

在使用 html5 画布时，视频可以比 animate cc 更好地跟踪同步。

只添加视频控件比同时添加帧、音频和视频更容易。

在尝试通过多种不同类型的 Internet 连接和设备实施时不易出错。

基本一样，只是去掉了音频同步功能。只需确保场景有足够的帧以匹配您设置的 fps 的视频长度即可。