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

Javascript metronome: HTML5 inside animation creating strange echo

本文关键字：回声 创建 内部 节拍器 HTML5 动画 Javascript      更新时间：2023-09-26

我正在制作一个简单的拉斐尔驱动的Javascript节拍器。我的问题是点击的声音，奇怪的是，在点击了大约12次之后，它开始发出两次声音。我目前使用的标签，但我有同样的问题，当使用SoundManager2。

我把它们都放在这里，这里是重要的部分:

<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毫秒左右。

谢谢!

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

相关文章：