你如何同步的JavaScript动画与歌曲的节奏,没有建立一个"音频可视化和QUOT ;? [英] How do you sync JavaScript animations with the tempo of a song, without building an "audio visualizer"?
问题描述
从我的基本的了解,JavaScript的音频可视化工具是基于实际的声波反射的音乐。我想建立像节拍器(http://bl.ocks.org/1399233),在那里我每天动画 X
拍一些DOM元素。
From my basic understanding, JavaScript audio visualizers are reflecting the music based on the actual sound waves. I would like to build something like a metronome (http://bl.ocks.org/1399233), where I animate some DOM element every x
beats.
我这样做,现在是我手动计算出乐曲的速度的方式,说这是120BPM,那么我将其转换为毫秒运行的setInterval
回调。但是,这似乎并没有工作,因为浏览器的性能,导致其对IM precise。有没有更好的办法,以确保在同一节奏的歌曲是准确执行的回调?
The way I'm doing this now is I manually figure out the tempo of the song, say it's 120bpm, then I convert that to milliseconds to run a setInterval
callback. But that doesn't seem to work because the browser performance causes it to be imprecise. Is there a better way to make sure a callback is executed exactly at the same tempo a song is in?
如果不是,那么其他一些策略,以同步与歌曲的节奏JavaScript的动画,这不是一个音频可视化工具?
If not, what are some other strategies to sync JavaScript animations with a song's tempo that's not an audio visualizer?
更新:是这样的,它看起来像? https://github.com/bestiejs/benchmark.js/blob /master/benchmark.js#L1606
Update: something like this it looks like? https://github.com/bestiejs/benchmark.js/blob/master/benchmark.js#L1606
推荐答案
我也有类似的问题,即的setInterval
不能上依赖于保持时间过期长。我的解决方案是下面的代码片段:(咖啡脚本编译JS是在结尾的链接)
I had a similar problem, in that setInterval
could not be relied on to "keep time" over a long period. My solution was the snippet below: (in coffee script, compiled js is in the link at the end)
它提供了替代setInetrval下降,将保持非常接近保持时间。有了它,你可以这样做:
It provides a drop in replacement for setInetrval that will stay very close to keeping time. With it, you can do this:
accurateInterval(1000 * 60 / bpm, callbackFunc);
请参阅我的使用案例和例子,同步以提供BPM在这里YouTube视频的视觉效果:<一href=\"http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1\">http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1
See my use case and example that syncs visuals with a provided BPM to a youtube video here: http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1
accurateInterval code:
accurateInterval code:
# 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:<一href=\"https://gist.github.com/1d99b3cd81d610ac7351\">https://gist.github.com/1d99b3cd81d610ac7351
这篇关于你如何同步的JavaScript动画与歌曲的节奏,没有建立一个&QUOT;音频可视化和QUOT ;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!