Question

我正在制作一个简单的拉斐尔驱动的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音效保持在30ms左右。

谢谢！

Answer 1

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

Javascript节拍器：HTML5内部动画创建奇怪的回声

1 个答案: