带离线音频上下文的 FFT

Question

我正在尝试对音频文件进行频率分析，但我希望它在不播放的情况下发生。我发现有一个offlineAudioContext，这可能是我这里需要的。

this jsfiddle中的完整代码

Web Audio API 对我来说是一个未开发的领域，我不完全确定我在做什么，很多教程都专注于实时音频，而这正是我想要阻止的。

在context.oncomplete 中，我设法获得了一些看起来准确的渲染音频缓冲区数据。从 fft 获取数据时，我似乎得到了一组非常小的数据，我猜这只是最后一个样本的数据。我宁愿为我正在加载的音频文件的每 x ms 获取此数据。我很想了解如何获取这种格式的数据？

基本上我所期待的是：

[
  // array with frequency data for every (nth) frequency band for 1st sample,
  // array with frequency data for every (nth) frequency band for 2nd sample,
  // array with frequency data for every (nth) frequency band for 3rd sample,
  …
]

Answer 1

当您在 AnalyserNode 上设置 fftSize 时，您将获得 (fftSize / 2) 的 bin 数量。这就是为什么您看到的数据比您预期的要少。

基本上发生的事情是getByteFrequencyData 只查看渲染缓冲区的前 128 个样本，其余的则被忽略。

相反，您可能想尝试使用ScriptProcessorNode 与bufferSize 等于您的fftSize。然后，在ScriptProcessorNode 的onaudioprocess 事件处理程序中，您可以抓取缓冲区并获取其FFT。像这样的：

var processor = context.createScriptProcessor(fftSize, 1, 1);
source.connect(processor);

processor.onaudioprocess = function( e ) {
  var input = e.inputBuffer.getChannelData(0),
      data = new Uint8Array(fftSamples);
  fft.getByteFrequencyData(data);
  // do whatever you want with `data`
}

Answer 2

假设缓冲区是一个包含单声道声音的 float32array，
这是我写的一个很好的离线分析代码。

传递给回调的函数将在分析的每一步执行。
传递给 onend 的函数将在进程结束时调用。

function callback(data) {
    callback.count = callback.count || 0;
    console.log(callback.count++, data);
}
fftAnalyser = function(buff, sampleRate, fftSize, callback, onend) {

    // by Zibri (2019)
    var frequencies = [1000,1200,1400,1600]; //for example
    var frequencyBinValue = (f)=>{
        const hzPerBin = (ctx.sampleRate) / (2 * analyser.frequencyBinCount);
        const index = parseInt((f + hzPerBin / 2) / hzPerBin);
        return data[index]+1;
    }
    ctx = new OfflineAudioContext(1,buff.length,sampleRate);
    ctx.sampleRate = sampleRate;
    ctx.destination.channelCount = 1;

    processor = ctx.createScriptProcessor(1024, 1, 1);
    processor.connect(ctx.destination);

    analyser = ctx.createAnalyser();
    analyser.fftSize = fftSize;
    analyser.smoothingTimeConstant = 0.0;

    //analyser.minDecibels = -60;
    //analyser.maxDecibels = -20;

    source = ctx.createBufferSource();
    source.connect(analyser);

    processor.onaudioprocess = function(e) {
        data = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(data);
        state = frequencies.map(frequencyBinValue.bind(this))
        if ("function" == typeof callback)
            onend();
        callback(state);
    }

    analyser.connect(processor);

    var sbuffer = ctx.createBuffer(1, buff.length, ctx.sampleRate);
    sbuffer.getChannelData(0).set(buff);
    source.buffer = sbuffer;

    source.onended = function(e) {
        console.log("Analysys ended.");
        if ("function" == typeof onend)
            onend();
    }

    console.log("Start Analysis.");

    source.start(0);
    ctx.startRendering();
}