从我的测试以及从搜索中找出有关问题的更多信息,我最好的猜测是CSS动画使用的物理时钟可能不同于流音频的物理时钟。如果是这样的话,也许对此的答案是无法完成,但是如果我遗漏了任何东西,我会提出疑问。
它用于我的在线节拍器here。
它能够合理地准确播放音符,以响应css animationiteration事件的事件侦听器。该事件监听器是使用例如
x.addEventListener("animationstart",playSoundBall2);
请参见here。
但是,如果我尝试将弹跳与遇到问题的AudioContext方法的示例精确定时进行同步。
我要做的是使用第一个css回调只是为了记录css消逝时间0的音频上下文时间。然后我使用类似的音符来弹奏音符:
oscillator.start(desired_start_time);
您可以使用页面上的选项进行尝试:“ here”上的“提前安排音符以精确采样音频”。
您可以通过在同一页面上打开“将调试信息添加到其他信息”来检查其漂移程度。
在我的开发计算机上,它可以与Firefox正常运行。但是在Edge和Chrome上,它会远离反弹。而且不是稳定的方式。可以罚款几分钟,然后弹跳相对于音频流开始变慢。
这不是浏览器活动的问题-如果我四处移动浏览器并尝试中断动画,则最糟糕的情况是它可能会留下音符,而如果浏览器不处于活动状态,则有可能会掉音。但是它播放的时间恰到好处。
到目前为止,我最好的猜测是,可能是浏览器正在使用系统时间,而audiocontext播放方法是将其安排在连续音频流中的精确点上。那些人很可能使用不同的硬件时钟,通过在线搜索来发现问题。
Firefox出于某种原因可能使用相同的硬件时钟,也许只是在我的开发机器上。
如果这是正确的,则看起来似乎没有办法保证将使用AudioContext播放的html音频与CSS动画精确同步。
如果是这样的话,我也认为您可能无法保证将其与任何javascript动画同步,因为这取决于浏览器用于动画的时钟,以及与流音频的时钟之间的关系。
但是真的可以吗?动画师需要长时间将声音与动画同步吗?还是它们一次只同步几分钟?
如果不是节拍器自然一次可以长时间使用,我不会注意到。这种情况可能会变得非常糟糕,以至于在两到三分钟后,点击动作就会从反弹中消失几秒钟。
在其他时间-编写本文时,我在Windows 10应用中使节拍器运行了十分钟,并且它已经漂移了,但相对于跳动仅20-30毫秒。因此,这是非常不规则的,因此您不希望通过增加一些固定的速度或减慢速度来使它们彼此及时解决。
我正在写这篇文章,以防万一有一种方法可以用javascript完成,而我遗漏了任何内容。我也很想知道如果我使用其他动画方法是否会有所不同。我看不到如何直接使用音频上下文时钟进行动画处理,因为您只能安排音频流中的音符,不能根据音频流在将来的特定确切时间安排回调。