CODEWITHSUNDEEP
jqueryperformancetempoadjustable
Opoe
Opoe

Reputation: 1387

How can i make a metronome with jQuery

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?

Upvotes: 2

Views: 2519

Answers (2)

sanderd
sanderd

Reputation: 809

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

Upvotes: 4

epeleg
epeleg

Reputation: 10945

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

Upvotes: 1

Related Questions