javascript - 在 JavaScript 中预处理音频数据(fft 频谱、峰值等)

Question

我目前可以使用 JavaScript Web Audio API 播放音轨。在播放此轨道时，我可以提取 FFT 频谱数据、峰值、RMS 值等。

但是，出于我的应用程序的目的，我需要能够在开始播放轨道之前从轨道中提取所有这些数据。

有没有办法使用 Web Audio API 来做到这一点。如果不是，还可以怎么做？

我试图通过使用以下代码来实现这一点，但它为每个“帧”返回了完全相同的值:

当用户选择文件时加载音频:

var fileChooser = document.getElementById("chooseAudio");
var audio = null;

var file = fileChooser.files[0];

var reader = new FileReader();

reader.onload = function(e) {
    audio = new Audio(reader.result);
}

reader.readAsDataURL(file);

音频加载完成后:

var FPS = 60;
var INCREMENT = 1 / FPS;
var FFT_SIZE = 256;
var SMOOTHING = 0.7;

var duration = null;
var length = null;
var width = null;
var time = null;

var analyser = null;
var data = null;
var index = null;

function analyse() {

    duration = audio.duration / APR;
    length = Math.ceil(duration * FPS);
    width = 4;
    time = 0.0;

    data = array(length, width);
    index = 0;

    var context = new AudioContext();

    analyser = context.createAnalyser();
    analyser.fftSize = FFT_SIZE;
    analyser.smoothingTimeConstant = SMOOTHING;

    var source = context.createMediaElementSource(audio);

    source.connect(analyser);
    analyser.connect(context.destination);

    audio.play();

    while (index < length) {

        audio.currentTime = time;

        frame = getFrame();
        data[index] = frame;

        time += INCREMENT;
        index++;

    }

    audio.pause();
    audio.currentTime = 0;

}

function getFrame() {

    var rawFreq = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(rawFreq);

    var rawTimeDom = new Uint8Array(analyser.fftSize);
    analyser.getByteTimeDomainData(rawTimeDom);

    var frame = [];
    frame.push(peak(rawTimeDom), rms(rawTimeDom), low(rawFreq), high(rawFreq));

    return frame;

}

数据的输出:

[
  [128, 128, 100.2, 68.3],
  [128, 128, 100.2, 68.3],
  ...
  [128, 128, 100.2, 68.3]
]

另外，我应该澄清一下，我尝试以每秒 60 次的频率对音频进行采样的原因是我需要稍后以相同的速率显示音频数据。

Answer 1

您可以使用 OfflineAudioContext 而不是 AudioContext 来预处理数据，而不是实时运行音频管道。

From the MDN page :

An OfflineAudioContext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an AudioBuffer.

在使用正常上下文播放音频之前，您可以在离线上下文中进行处理!