javascript - 如何使用 JS WebAudioAPI 进行节拍检测？

Question

我有兴趣使用 JavaScript WebAudioAPI 来检测歌曲节拍，然后将它们呈现在 Canvas 中。

我可以处理 Canvas 部分，但我不是一个大音频专家，而且真的不明白如何用 JavaScript 制作节拍检测器。

我试过关注 this article但就我的生活而言，无法将每个功能之间的点连接起来以制作功能程序。

我知道我应该给你看一些代码，但老实说我没有，我所有的尝试都惨败，相关代码在前面提到的文章中。

无论如何，我非常感谢一些指导，或者更好的演示如何使用 WebAudioAPI 实际检测歌曲节拍。

谢谢!

Answer 1

了解the referenced article by Joe Sullivan的主要内容是尽管它给出了大量的源代码，但它离最终完整的代码还很远。要获得可行的解决方案，您仍然需要一些编码和调试技能。

此答案的大部分代码来自引用文章，原始许可适用于适当的地方。

下面是使用上述文章中描述的功能的简单示例实现，您仍然需要找出功能解决方案的正确阈值。

---

代码由为答案编写的准备代码组成:

• 正在通过 the FileReader API 读取本地文件
• 使用 the AudioContext API 将文件解码为音频数据

然后，如文章所述:

• 过滤音频，在本例中使用 low-pass filter
• 使用阈值计算峰值
• 分组间隔计数，然后分组节奏计数

对于阈值，我使用了最大值和最小值之间范围的 0.98 的任意值；在分组时，我添加了一些额外的检查和任意舍入以避免可能的无限循环并使其成为易于调试的示例。

请注意，为了保持示例实现的简洁，注释很少，因为:

• 在引用文章中解释了处理背后的逻辑
• 语法可以引用相关方法的API文档

---

audio_file.onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  var context = new(window.AudioContext || window.webkitAudioContext)();
  reader.onload = function() {
    context.decodeAudioData(reader.result, function(buffer) {
      prepare(buffer);
    });
  };
  reader.readAsArrayBuffer(file);
};

function prepare(buffer) {
  var offlineContext = new OfflineAudioContext(1, buffer.length, buffer.sampleRate);
  var source = offlineContext.createBufferSource();
  source.buffer = buffer;
  var filter = offlineContext.createBiquadFilter();
  filter.type = "lowpass";
  source.connect(filter);
  filter.connect(offlineContext.destination);
  source.start(0);
  offlineContext.startRendering();
  offlineContext.oncomplete = function(e) {
    process(e);
  };
}

function process(e) {
  var filteredBuffer = e.renderedBuffer;
  //If you want to analyze both channels, use the other channel later
  var data = filteredBuffer.getChannelData(0);
  var max = arrayMax(data);
  var min = arrayMin(data);
  var threshold = min + (max - min) * 0.98;
  var peaks = getPeaksAtThreshold(data, threshold);
  var intervalCounts = countIntervalsBetweenNearbyPeaks(peaks);
  var tempoCounts = groupNeighborsByTempo(intervalCounts);
  tempoCounts.sort(function(a, b) {
    return b.count - a.count;
  });
  if (tempoCounts.length) {
    output.innerHTML = tempoCounts[0].tempo;
  }
}

// http://tech.beatport.com/2014/web-audio/beat-detection-using-web-audio/
function getPeaksAtThreshold(data, threshold) {
  var peaksArray = [];
  var length = data.length;
  for (var i = 0; i < length;) {
    if (data[i] > threshold) {
      peaksArray.push(i);
      // Skip forward ~ 1/4s to get past this peak.
      i += 10000;
    }
    i++;
  }
  return peaksArray;
}

function countIntervalsBetweenNearbyPeaks(peaks) {
  var intervalCounts = [];
  peaks.forEach(function(peak, index) {
    for (var i = 0; i < 10; i++) {
      var interval = peaks[index + i] - peak;
      var foundInterval = intervalCounts.some(function(intervalCount) {
        if (intervalCount.interval === interval) return intervalCount.count++;
      });
      //Additional checks to avoid infinite loops in later processing
      if (!isNaN(interval) && interval !== 0 && !foundInterval) {
        intervalCounts.push({
          interval: interval,
          count: 1
        });
      }
    }
  });
  return intervalCounts;
}

function groupNeighborsByTempo(intervalCounts) {
  var tempoCounts = [];
  intervalCounts.forEach(function(intervalCount) {
    //Convert an interval to tempo
    var theoreticalTempo = 60 / (intervalCount.interval / 44100);
    theoreticalTempo = Math.round(theoreticalTempo);
    if (theoreticalTempo === 0) {
      return;
    }
    // Adjust the tempo to fit within the 90-180 BPM range
    while (theoreticalTempo < 90) theoreticalTempo *= 2;
    while (theoreticalTempo > 180) theoreticalTempo /= 2;

    var foundTempo = tempoCounts.some(function(tempoCount) {
      if (tempoCount.tempo === theoreticalTempo) return tempoCount.count += intervalCount.count;
    });
    if (!foundTempo) {
      tempoCounts.push({
        tempo: theoreticalTempo,
        count: intervalCount.count
      });
    }
  });
  return tempoCounts;
}

// http://stackoverflow.com/questions/1669190/javascript-min-max-array-values
function arrayMin(arr) {
  var len = arr.length,
    min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}

function arrayMax(arr) {
  var len = arr.length,
    max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}

<input id="audio_file" type="file" accept="audio/*"></input>
<audio id="audio_player"></audio>
<p>
  Most likely tempo: <span id="output"></span>
</p>