AudioWorkletProcessor process()因onmessage阻塞致音频卡顿求助

初始代码里，AudioWorkletProcessor的process()方法跑在音频渲染线程，而port.onmessage的回调也会占用同一个线程。每当有消息进来，process()就会被打断，哪怕只是短时间暂停，也会触发音频卡顿——毕竟音频线程对延迟零容忍，一丁点阻塞都会引发爆音或断流。

你想拆分两个Worklet的思路是对的，但核心错误在于：不同的AudioWorkletProcessor实例是完全隔离的，根本没法直接访问彼此的属性，queueWorkletNode.queue这种写法从逻辑上就行不通。

方案1：优化单Worklet队列（最简单高效） #

不用拆分Worklet，只要把消息接收和音频渲染的操作解耦，同时控制消息发送频率，就能解决卡顿问题。

修改后的worklet-processor.js：

class AudioProcessor extends AudioWorkletProcessor {
    constructor() {
        super();
        this.queue = [];
        this.pendingQueue = []; // 用临时队列存消息，避免干扰process的执行
        this.queueLengthMinload = 750;
        this.queueLengthPreload = 950;
        
        this.port.onmessage = (event) => {
            if (event.data) {
                // 只做快速入队，别加console.log（日志会拖慢线程）
                this.pendingQueue.push(event.data);
            }
        };
    }

    process(inputs, outputs, parameters) {
        const output = outputs[0];
        
        // 在process开头合并临时队列，这个操作是原子性的，不会被打断
        if (this.pendingQueue.length > 0) {
            this.queue.push(...this.pendingQueue);
            this.pendingQueue.length = 0;
        }

        if (this.queue.length > this.queueLengthMinload) {
            const segment = this.queue.shift();
            for (let x = 0; x < output.length; ++x) {
                if (x < segment.length) {
                    output[x].set(segment[x]);
                }
            }
        }

        if (this.queue.length < this.queueLengthPreload) {
            this.port.postMessage('need-more-data');
        }

        return true;
    }
}

registerProcessor('audio-processor', AudioProcessor);

同时修改main.js里的sendNextSegment，别一次性发完所有片段，分批发送减少消息压力：

function sendNextSegment() {
    if (audioQueue.length > 0 && audioWorkletNode) {
        // 每次最多发10个片段，避免一次性塞太多消息阻塞线程
        const sendCount = Math.min(10, audioQueue.length);
        for (let i = 0; i < sendCount; ++i) {
            audioWorkletNode.port.postMessage(audioQueue.shift());
        }
    }
}

方案2：用SharedArrayBuffer共享队列（进阶高效） #

如果想进一步降低线程通信开销，可以用SharedArrayBuffer让主线程和Worklet共享队列，跳过postMessage的序列化步骤。但要注意页面得配置跨域安全头：Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin。

简化示例：

// worklet-processor.js
class AudioProcessor extends AudioWorkletProcessor {
    constructor() {
        super();
        this.sharedQueue = null;
        this.port.onmessage = (event) => {
            if (event.data.type === 'init-shared-queue') {
                this.sharedQueue = event.data.queue;
            }
        };
    }

    process(inputs, outputs, parameters) {
        const output = outputs[0];
        if (!this.sharedQueue) return true;

        // 用Atomics保证线程安全，避免读写冲突
        while (Atomics.load(this.sharedQueue.length, 0) > 0) {
            // 读取并处理队列中的音频片段
        }

        return true;
    }
}

方案3：正确实现多Worklet通信（对应你的拆分思路） #

如果坚持要拆分两个Worklet，必须通过消息传递让音频处理器从队列处理器拿数据，不能直接访问属性。

修改worklet-queue.js：

class AudioQueue extends AudioWorkletProcessor {
    constructor() {
        super();
        this.queue = [];
        this.queueLengthMinload = 750;
        this.queueLengthPreload = 950;
        
        this.port.onmessage = (event) => {
            if (event.data.type === 'add-segment') {
                this.queue.push(event.data.segment);
            } else if (event.data.type === 'get-segment') {
                // 符合条件就把片段发给音频处理器
                if (this.queue.length > this.queueLengthMinload) {
                    this.port.postMessage({
                        type: 'segment',
                        data: this.queue.shift()
                    });
                }
            }
        };
    }

    process(inputs, outputs, parameters) {
        return true;
    }
}

registerProcessor('audio-queue', AudioQueue); // 注意这里之前写错了，要注册AudioQueue类

修改worklet-processor.js：

class AudioProcessor extends AudioWorkletProcessor {
    constructor() {
        super();
        this.pendingSegments = [];
        this.queueLengthMinload = 750;
        this.queueLengthPreload = 950;
        
        // 接收队列处理器发来的片段
        this.port.onmessage = (event) => {
            if (event.data.type === 'segment') {
                this.pendingSegments.push(event.data.data);
            }
        };

        // 向队列处理器请求数据
        this.port.postMessage({ type: 'get-segment' });
    }

    process(inputs, outputs, parameters) {
        const output = outputs[0];
        
        if (this.pendingSegments.length > 0) {
            const segment = this.pendingSegments.shift();
            for (let x = 0; x < output.length; ++x) {
                if (x < segment.length) {
                    output[x].set(segment[x]);
                }
            }
        }

        // 队列不足时请求更多数据
        if (this.pendingSegments.length < this.queueLengthPreload) {
            this.port.postMessage({ type: 'get-segment' });
        }

        return true;
    }
}

registerProcessor('audio-processor', AudioProcessor);

最后在main.js里建立两个Worklet的消息通道：

async function initializeAudioContext() {
    context = new AudioContext();
    gainNode = context.createGain();
    gainNode.gain.value = volumeRange.value / 10;
    gainNode.connect(context.destination);

    await context.audioWorklet.addModule('worklet-queue.js');
    await context.audioWorklet.addModule('worklet-processor.js');

    const queueWorkletNode = new AudioWorkletNode(context, 'audio-queue');
    const procWorkletNode = new AudioWorkletNode(context, 'audio-processor');
    
    // 转发队列处理器的消息给音频处理器
    queueWorkletNode.port.onmessage = (event) => {
        if (event.data.type === 'segment') {
            procWorkletNode.port.postMessage(event.data);
        }
    };

    // 转发音频处理器的请求给队列处理器
    procWorkletNode.port.onmessage = (event) => {
        if (event.data.type === 'get-segment') {
            queueWorkletNode.port.postMessage(event.data);
        } else if (event.data === 'need-more-data') {
            sendNextSegment();
        }
    };

    procWorkletNode.connect(gainNode);
}

function sendNextSegment() {
    if (audioQueue.length > 0 && queueWorkletNode) {
        const sendCount = Math.min(10, audioQueue.length);
        for (let i = 0; i < sendCount; ++i) {
            queueWorkletNode.port.postMessage({
                type: 'add-segment',
                segment: audioQueue.shift()
            });
        }
    }
}

1. 音频线程绝对不能卡：process()和port.onmessage都跑在音频线程，任何耗时操作（比如日志、复杂计算）都会导致卡顿，必须精简再精简。
2. 控制消息发送频率：批量发送消息会占用大量线程时间，分批发送更稳妥。
3. Worklet是隔离的：不同实例之间只能通过消息或SharedArrayBuffer通信，别想直接访问对方的属性。
4. 缓冲阈值要合理：根据采样率和片段大小调整queueLengthMinload和queueLengthPreload，既要避免缓冲不足，也别占太多内存。

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