如何用AudioWorklet播放AudioContext解码后的AudioBuffer？

你的核心问题出在AudioWorkletProcessor的process方法逻辑错误：每次调用process时，你都试图把整个音频数据的所有块（按128帧拆分）重复写入当前的128帧输出缓冲区，导致同一批样本被反复叠加播放，最终产生噪音。此外还有几个次要问题需要修正：

具体问题点与修复步骤 #

1. 重复创建AudioContext #

代码中分别创建了两个AudioContext实例，这不仅浪费资源，还会导致上下文不一致。应该复用同一个实例。

2. 缺少播放位置跟踪 #

没有维护当前播放到音频数据的哪个位置，每次process都从头开始写入数据，导致样本重复播放。需要添加一个指针变量记录当前播放索引。

3. 错误的process方法逻辑 #

process方法每次被调用时，只需要填充当前的128帧输出缓冲区（或剩余不足128帧的部分），而不是循环所有数据块。

4. 数据传递优化（可选） #

传递Float32Array时使用Transferable Objects，避免大数组复制，提升性能。

修正后的完整代码 #

主线程代码 #

// 复用同一个AudioContext
const audioContext = new AudioContext();

// 加载Worklet模块并创建节点
await audioContext.audioWorklet.addModule("./playing-audio-processor.js");
const playingAudioNode = new AudioWorkletNode(
    audioContext,
    "playing-audio-processor"
);
playingAudioNode.connect(audioContext.destination);
await audioContext.resume();

// 解码音频并发送到Worklet
audioContext.decodeAudioData(new Uint8Array(audioData).buffer, (audioBuffer) => {
    // 使用Transferable传递数组，避免复制
    const channelData = audioBuffer.getChannelData(0);
    playingAudioNode.port.postMessage(
        { audioData: channelData, sampleRate: audioBuffer.sampleRate },
        [channelData.buffer]
    );
});

AudioWorklet处理器代码（playing-audio-processor.js） #

class PlayingAudioProcessor extends AudioWorkletProcessor {
    audioData = null;
    currentPosition = 0;

    constructor() {
        super();
        this.port.onmessage = (event) => {
            this.audioData = event.data.audioData;
            this.currentPosition = 0; // 重置播放位置
        };
    }

    process(inputs, outputs, parameters) {
        const output = outputs[0][0];
        if (!this.audioData) {
            // 无音频数据时填充静音
            output.fill(0);
            return true;
        }

        const framesToFill = Math.min(output.length, this.audioData.length - this.currentPosition);
        
        // 填充当前需要播放的样本
        for (let i = 0; i < framesToFill; i++) {
            output[i] = this.audioData[this.currentPosition + i];
        }

        // 剩余帧填充静音
        for (let i = framesToFill; i < output.length; i++) {
            output[i] = 0;
        }

        this.currentPosition += framesToFill;

        // 播放完毕后返回false停止处理器（可选，根据需求调整）
        return this.currentPosition < this.audioData.length;
    }
}

registerProcessor("playing-audio-processor", PlayingAudioProcessor);

额外说明 #

• 如果需要处理多通道音频，可以在主线程传递所有通道的数据，在process方法中分别填充对应输出通道。
• 若需要循环播放，可在currentPosition到达末尾时重置为0。

内容的提问来源于stack exchange，提问作者Mamink