blocks|key|3584524|text|这篇文章可能是相关的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3584525|3584526|Is+there+a+more+accurate+way+to+create+a+Javascript+timer+than+setTimeout?|unordered-list-item|offset|length|3584527|3584528|要点是，您在setInterval()中运行函数的速度略快于您的节奏，例如，每隔100ms。长例简而言之，您可以通过检查(new+Date()).getMilliseconds()的值并查看是否已经过了相当于毫秒一个节拍的时间，而不是依赖不太准确的setTimeout或setInterval函数，来跟踪是否到了播放“节拍”的时候。|style|CODE|3584529|即使这样，音乐本身，除非由计算机产生，否则可能不会有完美或一致的节奏，所以对你来说，计算错误的节拍可能是一个障碍，这可能就是为什么使用音频分析来找出实际节拍将发生在哪里可能是一个更好的方法。|3584530|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/196027/is-there-a-more-accurate-way-to-create-a-javascript-timer-than-settimeout^0|0|0|0|22|0|0|0|6|D|1O|U|3G|A|3R|B|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Y|8|@]|9|@$F|Z|G|10|1|11]]|A|$]]|$1|H|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@$F|14|G|15|K|L]|$F|16|G|17|K|L]|$F|18|G|19|K|L]|$F|1A|G|1B|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

This post might be relevant:

<ul>
<li><a href="https://stackoverflow.com/questions/196027/is-there-a-more-accurate-way-to-create-a-javascript-timer-than-settimeout">Is there a more accurate way to create a Javascript timer than setTimeout?</a></li>
</ul>

The gist is that you run a function in your <code>setInterval()</code> slightly faster than your tempo, for example, every 100ms. Long example short, you can track whether or not it's time to play a "beat" by checking the value of <code>(new Date()).getMilliseconds()</code> and seeing if the equivalent of one beat in milliseconds has passed instead of relying on the not-so-accurate <code>setTimeout</code> or <code>setInterval</code> functions.

Even with that, music itself, unless generated by a computer, might not have perfect or consistent tempo, so accounting for mistimed beats could be a hurdle for you, which may be why using audio analysis to find where the actual beats are going to happen could be a better route.

blocks|key|3813|text|我也遇到过类似的问题，因为不能依靠setInterval在很长一段时间内“保持时间”。我的解决方案是下面的代码片段：(在咖啡脚本中，已编译的js位于链接的末尾)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3814|它为setInetrval提供了一个非常接近于保持时间的替代方案。使用它，您可以执行以下操作：|3815|accurateInterval(1000+*+60+/+bpm,+callbackFunc);|code-block|syntax|javascript|3816|在这里查看我的使用案例和示例，它可以将提供的BPM的视频同步到youtube视频：http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1|3817|accurateInterval代码：|3818|#+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()+%2B+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+%2B=+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|3819|在这里获取咖啡脚本和js：https://gist.github.com/1d99b3cd81d610ac7351|3820|entityMap|0|LINK|mutability|MUTABLE|url|http://squeegy.github.com/MandalaTron/?bpm=64&vid=EaAzRm5MfY8&vidt=0.5&fullscreen=1|1|https://gist.github.com/1d99b3cd81d610ac7351^0|H|B|0|0|0|15|2B|0|0|0|0|D|18|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|O|3|P|5|6|7|1D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|U|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

I had a similar problem, in that <code>setInterval</code> 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)

It provides a drop in replacement for setInetrval that will stay very close to keeping time. With it, you can do this:

<pre><code>accurateInterval(1000 * 60 / bpm, callbackFunc);
</code></pre>

See my use case and example that syncs visuals with a provided BPM to a youtube video here: <a href="http://squeegy.github.com/MandalaTron/?bpm=64&amp;vid=EaAzRm5MfY8&amp;vidt=0.5&amp;fullscreen=1">http://squeegy.github.com/MandalaTron/?bpm=64&amp;vid=EaAzRm5MfY8&amp;vidt=0.5&amp;fullscreen=1</a>

accurateInterval code:

<pre><code># Accurate Interval, guaranteed not to drift!
# (Though each call can still be a few milliseconds late)
window.accurateInterval = (time, fn) -&gt;

 # 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 = -&gt;
 nextAt += time
 wrapper.timeout = setTimeout wrapper, nextAt - new Date().getTime()
 fn()

 # Clear the next call when canceled.
 wrapper.cancel = -&gt; 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
</code></pre>

get the coffee script and js here: <a href="https://gist.github.com/1d99b3cd81d610ac7351">https://gist.github.com/1d99b3cd81d610ac7351</a>

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 <code>x</code> beats.

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 <code>setInterval</code> 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?

If not, what are some other strategies to sync JavaScript animations with a song's tempo that's not an audio visualizer?

Update: something like this it looks like? <a href="https://github.com/bestiejs/benchmark.js/blob/master/benchmark.js#L1606" rel="nofollow">https://github.com/bestiejs/benchmark.js/blob/master/benchmark.js#L1606</a>

How do you sync JavaScript animations with the tempo of a song, without building an "audio visualizer"?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

根据我的基本理解，JavaScript音频可视化工具是根据实际的声波反射音乐的。我想构建一个类似于节拍器()的东西，在其中我为每个x节拍的一些DOM元素设置动画。我现在这样做的方式是，我手动计算出歌曲的节奏，假设是120bpm，然后我将其转换为毫秒来运行setInterval回调。但这似乎不起作用，因为浏览器的性能导致...

问如何在不构建“音频可视化工具”的情况下，将JavaScript动画与歌曲的节奏同步？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不构建“音频可视化工具”的情况下，将JavaScript动画与歌曲的节奏同步？EN