Question

I’d like to make a metronome using jquery, with a clicking sound and a color to visualize the tempo. At that point, the visual part works fine, but i have a problem with the sound.

Can’t make it work, it is supposed to beep as many times per minutes as the selected tempo.

Here is the code :

$(function(){
var intervalReference = 0;

var metronomeTick = function() {
    $("#metronome").stop();
    $("#metronome").animate({opacity: 1},
        30,                            
        function() { $(this).animate({opacity:0});
        $("#beep").append('autostart', 'true');
    }
    );
};

$(function() {
    var slider = $("#bpm").slider({
        min: 40,
        max: 240,
        value: 120,
        slide: function( event, ui ) {
            clearInterval(intervalReference);
            intervalReference = setInterval(metronomeTick, 1000*60/ui.value);
            $("#bpmshow").text("bpm: " + ui.value);
        }
    });
});
});

HTML :

<div id="bpm"></div>
<span id="bpmshow"></span>
<div id="metronome"></div>
<embed id="beep" src="timer.wav" hidden="true" loop="true" autostart="false">

Any help will be greatly appreciated, thanks a lot !

Answer 1

Ok, well, i was on the wrong way.

I wanted to hear the sound each time my visual div was displayed. The problem was I used the animate() function to do this, and it couldn’t trigger the play() event.

I’ve rewritten the code using window.setTimeout() to control the timing, and play() to load and play the beep thanks to the HTML5 <audio> tag.

Sorry can’t explain more, the script is still not finished yet.