如何利用JavaScript的ArrayBuffer和TypedArray处理音频波形数据，以及它在实时音频分析中的应用？

ArrayBuffer

TypedArray

ArrayBuffer

TypedArray

ArrayBuffer

TypedArray

ArrayBuffer

TypedArray

Float32Array

ArrayBuffer

async function processWavData(arrayBuffer) {
    // 假设是16位单声道PCM数据，采样率44100Hz
    // 通常WAV文件会有头部信息，这里简化处理，直接从数据开始部分
    // 实际应用中需要解析WAV头来确定数据格式、声道数等
    const dataOffset = 44; // 常见WAV头大小
    const pcmData = new Int16Array(arrayBuffer, dataOffset);

    // 现在pcmData就是一个Int16Array，每个元素代表一个音频采样点
    // 我们可以遍历它进行分析
    let sum = 0;
    for (let i = 0; i < pcmData.length; i++) {
        sum += Math.abs(pcmData[i]); // 例如，计算平均振幅
    }
    const averageAmplitude = sum / pcmData.length;
    console.log("Average Amplitude:", averageAmplitude);

    // 如果需要更精细的分析，比如归一化到-1到1的浮点数范围
    const floatData = new Float32Array(pcmData.length);
    const maxInt16 = 32767;
    for (let i = 0; i < pcmData.length; i++) {
        floatData[i] = pcmData[i] / maxInt16;
    }
    // floatData现在就是归一化后的波形数据，可以直接用于可视化或进一步的DSP
    return floatData;
}

// 示例：从URL获取音频文件并处理
// fetch('audio.wav')
//     .then(response => response.arrayBuffer())
//     .then(buffer => processWavData(buffer))
//     .then(floatData => {
//         // 在这里使用floatData进行可视化或实时分析
//         console.log("Processed float data length:", floatData.length);
//     })
//     .catch(error => console.error("Error processing audio:", error));

Web Audio API

Float32Array

TypedArray

AudioContext.decodeAudioData()

decodeAudioData()

ArrayBuffer

fetch

AudioBuffer

AudioBuffer

Float32Array

async function loadAndDecodeAudio(url) {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

    // 获取第一个声道的Float32Array数据
    const channelData = audioBuffer.getChannelData(0);
    console.log("AudioBuffer channel 0 data (Float32Array):", channelData);
    // 此时，channelData就是你可以直接用于分析的波形数据
    return channelData;
}

// loadAndDecodeAudio('path/to/your/audio.mp3').then(data => {
//     // 对data进行进一步的分析或可视化
// });

AnalyserNode

AnalyserNode

ArrayBuffer

TypedArray

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048; // 设置FFT大小，影响频率分辨率

// 连接到音频源（例如麦克风或一个<audio>元素）
// const mediaElementSource = audioContext.createMediaElementSource(myAudioElement);
// mediaElementSource.connect(analyser);
// analyser.connect(audioContext.destination); // 确保音频可以播放

const bufferLength = analyser.frequencyBinCount; // 通常是fftSize / 2
const dataArray = new Uint8Array(bufferLength); // 或 Float32Array

function draw() {
    requestAnimationFrame(draw);
    // 获取实时波形数据 (时域)
    analyser.getByteTimeDomainData(dataArray); // 数据范围 0-255
    // 或者获取实时频谱数据 (频域)
    // analyser.getByteFrequencyData(dataArray); // 数据范围 0-255

    // 如果需要Float32Array，可以使用：
    // analyser.getFloatTimeDomainData(floatDataArray); // 数据范围 -1 to 1
    // analyser.getFloatFrequencyData(floatDataArray); // 数据范围 -Infinity to 0

    // 现在 dataArray 或 floatDataArray 包含了实时的音频波形/频谱数据
    // 可以将其用于可视化或简单的分析
    // 例如，计算平均音量
    let sum = 0;
    for (let i = 0; i < dataArray.length; i++) {
        sum += dataArray[i];
    }
    const average = sum / dataArray.length;
    // console.log("Real-time average:", average);
}
// draw();

AnalyserNode

AudioWorklet

AudioWorklet

Float32Array

AudioWorklet

AudioWorkletNode

audio-processor.js

class AudioProcessor extends AudioWorkletProcessor {
    process(inputs, outputs, parameters) {
        const input = inputs[0]; // 第一个输入端口
        const output = outputs[0]; // 第一个输出端口

        if (input.length > 0) {
            const inputChannelData = input[0]; // 第一个输入声道的Float32Array
            const outputChannelData = output[0]; // 第一个输出声道的Float32Array

            // 在这里，inputChannelData就是原始的Float32Array波形数据
            // 你可以直接对其进行采样级操作
            for (let i = 0; i < inputChannelData.length; i++) {
                // 示例：简单地将输入复制到输出，或者进行一些处理
                outputChannelData[i] = inputChannelData[i] * 0.8; // 降低音量
                // 或者进行更复杂的分析，比如计算RMS并发送回主线程
                // this.port.postMessage({ type: 'rms', value: calculateRMS(inputChannelData) });
            }
        }
        return true; // 保持处理器活跃
    }
    // 假设有一个 calculateRMS 函数
    // calculateRMS(data) { /* ... */ }
}
registerProcessor('audio-processor', AudioProcessor);

script.js

async function setupAudioWorklet() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    await audioContext.audioWorklet.addModule('audio-processor.js');

    const source = audioContext.createMediaElementSource(myAudioElement); // 例如，一个<audio>元素
    const audioProcessorNode = new AudioWorkletNode(audioContext, 'audio-processor');

    // 监听来自Worklet的消息（例如，分析结果）
    audioProcessorNode.port.onmessage = event => {
        // console.log("Message from AudioWorklet:", event.data);
    };

    source.connect(audioProcessorNode);
    audioProcessorNode.connect(audioContext.destination);

    // 开始播放音频
    myAudioElement.play();
}
// setupAudioWorklet();

AudioWorklet

Float32Array

TypedArray

TypedArray

ArrayBuffer

TypedArray

ArrayBuffer

transferable

ArrayBuffer

TypedArray

ArrayBuffer

postMessage

transfer

ArrayBuffer

TypedArray

TypedArray

TypedArray

ArrayBuffer

ArrayBuffer

TypedArray

ArrayBuffer

TypedArray

ArrayBuffer

TypedArray

TypedArray

TypedArray

ArrayBuffer