如何用 jQuery 制作节拍器

Question

这不一定是点击声。 我需要一些东西来可视化某个节奏/节拍器

如何使声音或图像以特定速度出现？ 所以也许用fade 或toggle() 但是你可以用一个节奏 在输入字段中进行调整。

有什么想法吗？

Answer 1

我想你应该看看一些动画扩展和缓动参数。 你可以从这里开始http://api.jquery.com/animate/ 也许你可以从这个例子中获取一些代码：http://www.irengba.com/codewell/loop.html

Answer 2

function metronomeTick() {
   $("#metronome").toggle();
   setTimeout("metronomeTick()", 1000*60/$("#bpm").val());
}

metronomeTick();

JavaScript setInterval() 方法通常不推荐使用，因为它没有记住函数“执行时间”（例如，实际可视化刻度需要多长时间）。再想一想，setInterval 在这种情况下会更好，因为它对时间很关键。

使用setInterval()，代码将类似于：

var intervalReference = setInterval("metronomeTick()", 1000*60/$("#bpm").val());

function metronomeTick() {
  // Do tick visualisation here, but make sure it takes only a reasonable amount of time
  // Less than 1000*60/bpm, that is
}

$("#bpm").change(function() {
  clearInterval(intervalReference);
  intervalReference = setInterval("metronomeTick()", 1000*60/$(this).val());
});