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();

The JavaScript setInterval() method is generally discouraged as it doesn't keep the function "execution time" (how long it takes to, for instance, actually visualize the tick) in mind. On second thought, setInterval would be even better in this case, since it's time-critical.

With setInterval(), the code would look something like:

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

I guess you should look at some animation extensions and parameters for easing. you can start here http://api.jquery.com/animate/ and maybe you can grab some code from this example: http://www.irengba.com/codewell/loop.html