I'm making a simple Raphael-powered Javascript metronome. My trouble is with the click sound, which strangely starts firing twice after about a dozen clicks. I'm currently using the tag, but I have the same problem when using SoundManager2.
I've got it all on a fiddle here, and here is the important part:
<audio id="tick" src="http://experimentsinform.com/media/audio/tick.wav"></audio>
<script>
var paper = Raphael("canvas", 300, 300);
function tick() {
document.getElementById("tick").play();
}
var metronome = function(x, y, l) {
//draw metronome. See fiddle
var mn = paper.set(stick, vertex, weight).attr("transform", "R-20 " + x + "," + y);
Raphael.easing_formulas.sinoid = function(n) { return Math.sin(Math.PI * n / 2) };
return {
start: function(tempo, sound) {
var interval = 120000 / tempo;
var ticktock = Raphael.animation({
"50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { sound(); }},
"100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { sound(); }}
}, interval);
mn.animate(ticktock.repeat(Infinity));
},
stop: function() {
mn.stop();
mn.attr("transform", "R-20 " + x + "," + y);
}
};
};
var m = metronome(150, 275, 250);
m.start(120, tick);
</script>
If you let it tick about 20 times in Chrome, you start getting a double-click sound. Anyone have any idea why? I kept the mp3 sound effect to 30ms or so.
Thank you!