如何在不构建“音频可视化工具”的情况下，将JavaScript动画与歌曲的节奏同步？
根据我的基本理解，JavaScript音频可视化工具是根据实际的声波反射音乐的。我想构建一个类似于节拍器(http://bl.ocks.org/1399233)的东西，在其中我为每个x节拍的一些DOM元素设置动画。
我现在这样做的方式是，我手动计算出歌曲的节奏，假设是120bpm，然后我将其转换为毫秒来运行setInterval回调。但这似乎不起作用，因为浏览器的性能导致它不精确。有没有更好的方法来确保回调完全按照歌曲的节奏执行？
如果没有，有什么其他的策略来同步JavaScript动画与歌曲的节奏，而不是一个音频可视化工具？
更新:看起来像这样的东西？https://github.com/bestiejs/benchmark.js/blob/master/benchmark.js#L1606
回答 2
Stack Overflow用户
发布于 2011-12-01 06:52:37
我也遇到过类似的问题，因为不能依靠setInterval在很长一段时间内“保持时间”。我的解决方案是下面的代码片段：(在咖啡脚本中，已编译的js位于链接的末尾)
它为setInetrval提供了一个非常接近于保持时间的替代方案。使用它，您可以执行以下操作：
accurateInterval(1000 * 60 / bpm, callbackFunc);在这里查看我的使用案例和示例，它可以将提供的BPM的视频同步到youtube视频：http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1
accurateInterval代码：
# Accurate Interval, guaranteed not to drift!
# (Though each call can still be a few milliseconds late)
window.accurateInterval = (time, fn) ->
# This value is the next time the the timer should fire.
nextAt = new Date().getTime() + time
# Allow arguments to be passed in in either order.
if typeof time is 'function'
[fn, time] = [time, fn]
# Create a function that wraps our function to run. This is responsible for
# scheduling the next call and aborting when canceled.
wrapper = ->
nextAt += time
wrapper.timeout = setTimeout wrapper, nextAt - new Date().getTime()
fn()
# Clear the next call when canceled.
wrapper.cancel = -> clearTimeout wrapper.timeout
# Schedule the first call.
setTimeout wrapper, nextAt - new Date().getTime()
# Return the wrapper function so cancel() can later be called on it.
return wrapper在这里获取咖啡脚本和js：https://gist.github.com/1d99b3cd81d610ac7351
Stack Overflow用户
发布于 2011-12-01 06:41:22
这篇文章可能是相关的：
要点是，您在setInterval()中运行函数的速度略快于您的节奏，例如，每隔100ms。长例简而言之，您可以通过检查(new Date()).getMilliseconds()的值并查看是否已经过了相当于毫秒一个节拍的时间，而不是依赖不太准确的setTimeout或setInterval函数，来跟踪是否到了播放“节拍”的时候。
即使这样，音乐本身，除非由计算机产生，否则可能不会有完美或一致的节奏，所以对你来说，计算错误的节拍可能是一个障碍，这可能就是为什么使用音频分析来找出实际节拍将发生在哪里可能是一个更好的方法。
https://stackoverflow.com/questions/8333981
复制相似问题
腾讯云开发者
