javascript - 如何在不构建 "audio visualizer"的情况下将 JavaScript 动画与歌曲的节奏同步？

Question

根据我的基本理解，JavaScript 音频可视化器正在根据实际声波反射(reflect)音乐。我想构建类似节拍器的东西 (http://bl.ocks.org/1399233)，我在其中每 x 节拍动画一些 DOM 元素。

我现在这样做的方式是我手动找出歌曲的节奏，比如 120bpm，然后我将其转换为毫秒以运行 setInterval 回调。但这似乎不起作用，因为浏览器性能导致它不精确。有没有更好的方法来确保回调以与歌曲相同的节奏执行？

如果不是，还有哪些其他策略可以将 JavaScript 动画与不是音频可视化工具的歌曲节奏同步？

更新:看起来像这样的东西？ https://github.com/bestiejs/benchmark.js/blob/master/benchmark.js#L1606

Answer 1

我有一个类似的问题，因为 setInterval 不能长期依赖于“保持时间”。我的解决方案是下面的代码片段:(在 CoffeeScript 中，编译后的 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

在此处获取 CoffeeScript 和 js:https://gist.github.com/1d99b3cd81d610ac7351