FFT พร้อม AudioContext ออฟไลน์

เมื่อคุณตั้งค่า fftSize บน AnalyserNode ของคุณ คุณจะได้รับ (fftSize / 2) จำนวนถังขยะ นั่นเป็นสาเหตุว่าทำไมคุณจึงเห็นข้อมูลน้อยกว่าที่คาดไว้มาก

โดยพื้นฐานแล้วสิ่งที่เกิดขึ้นคือ getByteFrequencyData ดูเฉพาะตัวอย่าง 128 ตัวอย่างแรกของบัฟเฟอร์ที่แสดงผลของคุณ และส่วนที่เหลือก็จะถูกเพิกเฉย

คุณอาจต้องการลองใช้ ScriptProcessorNode โดยที่ bufferSize เท่ากับ fftSize ของคุณแทน จากนั้น ในตัวจัดการเหตุการณ์ onaudioprocess ของ ScriptProcessorNode คุณสามารถคว้าบัฟเฟอร์และรับ 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`
}

สมมติว่าบัฟเฟอร์นั้นเป็น 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();
}