Javascript metronome: HTML5 inside animation creating strange echo

[ShareFive]

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:\[code\]<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>\[/code\]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!