javascript - JavaScript节拍器:HTML5内部动画创建奇怪的回声

Question

我正在制作一个由Raphael驱动的简单Javascript节拍器。我的麻烦在于点击声，大约十次点击后奇怪地开始触发两次。我当前正在使用标签，但是使用SoundManager2时遇到相同的问题。

我已经拥有了on a fiddle here，这是重要的部分:

<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>

如果让它在Chrome中打勾约20次，您就会开始听到双击声。有人知道为什么吗？我将mp3音效保持在30毫秒左右。

谢谢!

Answer 1

啊，拉斐尔(Raphael)将动画应用于集合中的三个元素中的每个元素，因此回调被调用了三次。感谢@UpTheCreek和@StarBeamRainboxLabs。