Question

我有两个setInterval实例。每个都会重复触发一个不同的功能（这两个功能是标题 quarterNoteFunc ＆amp; eightNoteFunc ）。 quarterNoteFunc 的间隔为600毫秒。 eightNoteFunc 的间隔为300毫秒。这两个功能都以重复间隔触发不同的音频文件，从而创建基本的音乐节奏。两个函数调用之间的节奏最终在Google Chrome中“漂移”，使两个声音之间的节奏消失。我的问题是：

似乎即使基于浏览器的计时是垃圾，它们也应该是创建某种“硬”计时参考的一种方式，这样即使“全局”计时偏移也会锁定声音，从而保持声音同步。我认为分配相同的变量毫秒（下面的代码）会抑制这个 - 但我错了。

（缩写）代码如下所示

毫秒= 600;

quarterNote = setInterval（quarterNoteFunc，milliseconds）;

eightNote = setInterval（eightNoteFunc，milliseconds / 2）;

Answer 1

执行此操作的最佳方法可能是拥有一个始终有效的1/8音符间隔，然后每隔一个音符调用四分音符：

// wrapped in a closure to allow for a private tickCount variable
// alternatively, you could use a more advanced object with start/stop methods, etc.
(function() {
    var tickCount = 0,
        tick = function() {
            eighthNoteFunc();
            if(tickCount %2 == 0) {
                quarterNoteFunc();
            }
            tickCount++;
        };

    setInterval(tick, 300);
})();

这确保始终在相同的tick上调用方法。您也可以展开此选项以支持半音符（tickCount % 4 == 0）和整个音符（tickCount % 8 == 0）。

这让我感兴趣，所以我决定创建一个完整的样本（除了使用动画背景而不是音频）：http://jsfiddle.net/SycBm/

这使您可以看到同步的八分音符，四分音符和半音符，以及开始和播放状态。停止计时器，并独立启用或禁用音符。

享受！

如何补偿Javascript音频中的setInterval时序漂移

1 个答案: