jquery - How can i make a metronome with jQuery

Question

This doesn't have to be with a clicking sound. I need something to visualize a certain tempo/ metronome

How can I make a sound or image appear on a certain tempo? So maybe with fade or toggle() but then with a tempo which you can adjust in an input field.

Any ideas?

Answer 1

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

metronomeTick();

通常不建议使用 JavaScriptsetInterval()方法，因为它没有记住函数“执行时间”（例如，实际可视化滴答声需要多长时间）。再想一想，在这种情况下 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());
});

Answer 2

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