Node.js中WebSocket接收MediaStream音频块无声音问题求助

我在Node.js中存储通过WebSocket传输的MediaStream音频块时，遇到了一个问题：生成的音频文件只有首个块有声音，后续块均无声音。推测是WebM头提取或后续块处理逻辑有误，相关代码如下：

ws.on("message", function incoming(message) {
    if (!(message instanceof Buffer)) {
        console.error("❌ Invalid message format: expected Buffer");
        return;
    }

    console.log(`📥 Received chunk: ${message.length} bytes`);

    // **1️⃣ Append to the Full WebM File**
    if (!mainWriteStream.write(message)) {
        mainWriteStream.once("drain", () => {
            mainWriteStream.write(message);
        });
    }

    // **2️⃣ Extract & Save WebM Header from First Chunk**
    if (!webmHeader) {
        webmHeader = extractWebMHeader(message);
        if (!webmHeader) {
            console.error("❌ Could not extract WebM header.");
            return;
        }
        console.log("✅ WebM Header Extracted:", webmHeader.length, "bytes");
    }

    // **3️⃣ Prepend WebM Header to Each Chunk Before Saving**
    const chunkId = uuidv4();
    const chunkFilePath = path.join(audioDir, `${chunkId}-chunk-audio.webm`);
    const chunkWithHeader = Buffer.concat([webmHeader, message]); // Ensure each chunk starts with metadata

    fs.writeFileSync(chunkFilePath, chunkWithHeader);
    console.log(`✅ Saved chunk file: ${chunkFilePath}`);

    // **4️⃣ Transcribe the Chunk**
    transcribeAudioChunk(chunkFilePath);
});  

function extractWebMHeader(buffer) {
 const headerSignature = Buffer.from([0x1A, 0x45, 0xDF, 0xA3]); // WebM Header Magic Number
const clusterSignature = Buffer.from([0x1F, 0x43, 0xB6, 0x75]); // Cluster Marker

const headerIndex = buffer.indexOf(headerSignature);
if (headerIndex === -1) return null; // No header found

const clusterIndex = buffer.indexOf(clusterSignature, headerIndex);
if (clusterIndex === -1) return null; // No valid cluster found

return buffer.slice(0, clusterIndex); // Extract header until first cluster
}

问题根源分析 #

1. 首个Chunk的冗余Header：第一个WebSocket消息包含完整的WebM头（EBML Header + Segment元数据）和第一个Cluster，代码将提取出的Header与整个message拼接，导致首个chunk文件包含两份WebM头，虽能兼容播放但属于冗余操作。
2. 后续Cluster时间戳不匹配：后续WebSocket消息仅包含Cluster块，这些Cluster的时间戳是基于整个MediaStream的累计时间（而非从0开始）。直接拼接Header后，播放器会认为音频内容在未来时间点才会播放，因此听不到声音。
3. 首个Chunk处理逻辑错误：将完整的首个message（含Header+Cluster）与提取的Header拼接，正确做法应该是仅取首个message中的Cluster部分与Header组合。

修正方案及代码 #

let webmHeader = null;
let firstClusterTimecode = 0; // 记录首个Cluster的时间戳基准

ws.on("message", function incoming(message) {
    if (!(message instanceof Buffer)) {
        console.error("❌ Invalid message format: expected Buffer");
        return;
    }

    console.log(`📥 Received chunk: ${message.length} bytes`);

    // 1️⃣ 写入完整WebM文件（逻辑保持不变）
    if (!mainWriteStream.write(message)) {
        mainWriteStream.once("drain", () => {
            mainWriteStream.write(message);
        });
    }

    // 2️⃣ 首次消息：提取Header+首个Cluster并处理
    if (!webmHeader) {
        const headerInfo = extractWebMHeaderWithTimecode(message);
        if (!headerInfo) {
            console.error("❌ Could not extract WebM header and timecode.");
            return;
        }
        webmHeader = headerInfo.header;
        firstClusterTimecode = headerInfo.timecode;

        // 生成首个有效Chunk：Header + 纯Cluster内容
        const firstCluster = message.slice(headerInfo.clusterStartIdx);
        saveAudioChunk(firstCluster);
        return;
    }

    // 3️⃣ 后续消息：修正Cluster时间戳后保存
    const adjustedCluster = fixClusterTimecode(message, firstClusterTimecode);
    if (!adjustedCluster) {
        console.error("❌ Failed to adjust cluster timecode.");
        return;
    }
    saveAudioChunk(adjustedCluster);
});

// 改进Header提取：同时获取首个Cluster的起始位置和时间戳
function extractWebMHeaderWithTimecode(buffer) {
    const headerMagic = Buffer.from([0x1A, 0x45, 0xDF, 0xA3]);
    const clusterMagic = Buffer.from([0x1F, 0x43, 0xB6, 0x75]);
    const timecodeId = Buffer.from([0xE7]); // Cluster内的Timecode元素ID

    const headerIdx = buffer.indexOf(headerMagic);
    if (headerIdx === -1) return null;

    const clusterIdx = buffer.indexOf(clusterMagic, headerIdx);
    if (clusterIdx === -1) return null;

    // 解析Cluster的Timecode值（EBML可变长度整数）
    let ptr = clusterIdx + 4; // 跳过Cluster签名
    // 定位Timecode元素
    while (ptr < buffer.length) {
        if (buffer.slice(ptr, ptr+1).equals(timecodeId)) {
            ptr += 1;
            // 解析长度字段
            const lengthByte = buffer[ptr];
            let lengthSize = 0;
            let length = 0;
            if ((lengthByte & 0x80) === 0x80) {
                length = lengthByte & 0x7F;
                lengthSize = 1;
            } else if ((lengthByte & 0x40) === 0x40) {
                length = ((lengthByte & 0x3F) << 8) | buffer[ptr+1];
                lengthSize = 2;
                ptr +=1;
            } else if ((lengthByte & 0x20) === 0x20) {
                length = ((lengthByte & 0x1F) << 24) | (buffer[ptr+1] <<16) | (buffer[ptr+2] <<8) | buffer[ptr+3];
                lengthSize =4;
                ptr +=3;
            } else {
                return null;
            }
            ptr += lengthSize;
            // 读取Timecode数值
            let timecode =0;
            for(let i=0;i<length;i++){
                timecode = (timecode <<8) | buffer[ptr+i];
            }
            return {
                header: buffer.slice(0, clusterIdx),
                clusterStartIdx: clusterIdx,
                timecode: timecode
            };
        }
        ptr +=1;
    }
    return null;
}

// 修正Cluster的时间戳，将基准改为0
function fixClusterTimecode(clusterBuffer, offset) {
    const clusterMagic = Buffer.from([0x1F, 0x43, 0xB6, 0x75]);
    const timecodeId = Buffer.from([0xE7]);

    if (!clusterBuffer.slice(0,4).equals(clusterMagic)) return null;

    let ptr =4;
    // 定位并修改Timecode
    while(ptr < clusterBuffer.length){
        if(clusterBuffer.slice(ptr, ptr+1).equals(timecodeId)){
            ptr +=1;
            // 解析长度
            const lengthByte = clusterBuffer[ptr];
            let lengthSize =0;
            let length =0;
            let originalTimecode =0;
            if((lengthByte &0x80) ===0x80){
                length = lengthByte &0x7F;
                lengthSize=1;
                originalTimecode = clusterBuffer[ptr+1];
            } else if((lengthByte &0x40)===0x40){
                length = ((lengthByte &0x3F)<<8) | clusterBuffer[ptr+1];
                lengthSize=2;
                ptr +=1;
                originalTimecode = (clusterBuffer[ptr+1]<<8) | clusterBuffer[ptr+2];
            } else if((lengthByte &0x20)===0x20){
                length = ((lengthByte &0x1F)<<24) | (clusterBuffer[ptr+1]<<16) | (clusterBuffer[ptr+2]<<8) | clusterBuffer[ptr+3];
                lengthSize=4;
                ptr +=3;
                originalTimecode = (clusterBuffer[ptr+1]<<24) | (clusterBuffer[ptr+2]<<16) | (clusterBuffer[ptr+3]<<8) | clusterBuffer[ptr+4];
            } else {
                return null;
            }
            ptr += lengthSize;
            // 计算新时间戳（基准改为0）
            const newTimecode = originalTimecode - offset;
            // 转为EBML可变长度Buffer
            let newTimecodeBuf;
            if(newTimecode <=0x7F){
                newTimecodeBuf = Buffer.from([newTimecode |0x80]);
            } else if(newTimecode <=0x3FFF){
                newTimecodeBuf = Buffer.from([(newTimecode>>8)|0x40, newTimecode&0xFF]);
            } else if(newTimecode <=0x1FFFFFFF){
                newTimecodeBuf = Buffer.from([(newTimecode>>24)|0x20, (newTimecode>>16)&0xFF, (newTimecode>>8)&0xFF, newTimecode&0xFF]);
            } else {
                return null;
            }
            // 替换原始时间戳部分
            return Buffer.concat([
                clusterBuffer.slice(0, ptr),
                newTimecodeBuf,
                clusterBuffer.slice(ptr+length)
            ]);
        }
        ptr +=1;
    }
    return clusterBuffer;
}

// 封装Chunk保存逻辑
function saveAudioChunk(clusterData) {
    const chunkId = uuidv4();
    const chunkFilePath = path.join(audioDir, `${chunkId}-chunk-audio.webm`);
    const chunkWithHeader = Buffer.concat([webmHeader, clusterData]);
    fs.writeFileSync(chunkFilePath, chunkWithHeader);
    console.log(`✅ Saved chunk file: ${chunkFilePath}`);
    transcribeAudioChunk(chunkFilePath);
}

关键说明 #

• 改进了Header提取逻辑，同时获取首个Cluster的时间戳基准，用于后续Cluster的时间修正。
• 修正后续Cluster的Timecode值，将时间基准改为0，确保播放器能从开头播放音频。
• 封装了Chunk保存逻辑，避免重复代码。如果需要更严谨的EBML结构处理，推荐使用ebml npm库进行完整解析和修改。

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