使用audioChunks.slice(-10)后WebM音频无法打开的问题求助

问题原因 #

WebM是带容器结构的媒体格式，第一个由dataavailable事件返回的音频块包含WebM文件的核心元数据（文件头、轨道描述等），后续的音频块只是纯媒体数据片段。启用audioChunks.slice(-10)时，会直接丢弃包含元数据的第一个块，剩下的媒体块没有合法文件头，拼接生成的Blob不是标准WebM文件，导致服务器无法识别打开。

解决方案 #

必须保留包含元数据的第一个音频块，仅对后续媒体数据块做数量限制。修改代码如下：

console.log("Starting recording ...")
audioChunks = []
recorder.addEventListener('dataavailable', evt => {
    
    if(evt.data.size > 0  && close_record === 1) {
        
        audioChunks.push(evt.data);

        // 保留第一个元数据块 + 最多9个最新媒体块，总数量不超过10
        if (audioChunks.length > 10) {
            // 取第一个块（元数据） + 最后9个块
            audioChunks = [audioChunks[0], ...audioChunks.slice(-9)];
        }

        blob = new Blob(audioChunks, { type: 'video/webm'  });
 
        async function makepredict(){
            let response = await fetch(`http://127.0.0.1:8000/api/audio/`, {
                 method: 'POST',
                 mode: 'cors',
                 body: blob
             });
             let result = response.json();
             return result;
         };
        makepredict().then( function(result) {
            if (result['translate'] !== "oke"){
                console.log(result)
            }else{
                console.log(audioChunks.length)
            }
        });
    }
})
recorder.start(300)

补充说明 #

• 可根据需求调整保留的媒体块数量（比如把slice(-9)改成slice(-N)，总块数为1+N），只要确保第一个元数据块不被删除即可。
• 若需更精确的音频时长控制，可结合recorder.start(300)（每300ms生成一个块）计算每个块的时长，再决定保留多少后续块，同时始终保留第一个元数据块。

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