jqueryperformancetempoadjustable

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?


Solution

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