使用MediaRecorder与Web Audio API录制的wav音频下载后缺失元数据如何补全

当前生成的音频文件缺少元数据，和调整MIME参数没有关联，问题出在文件本身的字节结构不符合WAV格式的官方规范。
主流浏览器对MediaRecorder的WAV编码实现，只会输出裸的16bit PCM音频采样块，不会自动按照规范补全44字节标准文件头。你直接把这些采样块拼接为Blob，就算声明audio/wav类型，文件内部也没有预留存放采样率、声道数、数据总长度的固定字段，播放器只能靠经验猜测解析PCM流的播放速率，自然无法显示准确的时长、采样率、声道数元数据。

• 录制阶段提前采集固定参数，不要等录制结束再反推：
  • 从和MediaRecorder绑定的AudioContext实例中，直接读取当前Web Audio处理链路的实际采样率，不要用设备采集端的原生采样率替代，避免重采样后的实际参数和写入文件头的参数不一致
  • 从传入MediaRecorder的MediaStream中，定位所有音频轨道调用getSettings()方法，获取实际输出的声道数
  • 录制全程累计统计采集到的PCM样本总长度，用来计算准确的文件时长（时长=总样本数/采样率）
• 录制结束生成Blob时，不要直接拼接原始chunks，需要按照WAV格式规范按固定顺序拼装整个文件结构：
  1. 写入RIFF标识的文件头块，标记文件类型为WAV
  2. 写入fmt格式子块，把提前获取的声道数、采样率、位深、字节率、块对齐参数按固定字节位置写入——这部分内容就是播放器能够读取到的采样率、声道数元数据的直接来源（比如声道数存在偏移22-23字节位置，采样率存在偏移24-27字节位置）
  3. 写入data数据块标识，填充所有录制得到的PCM音频采样数据
  4. 修正文件头中的总文件长度、音频数据块长度字段，播放器结合采样率和这个长度值就能算出准确的音频总时长
• 修正现有代码的逻辑漏洞：你当前代码中把URL.createObjectURL(blob)生成的对象地址赋值给了audio元素，但后续下载链接的href是从id为downloadblob的元素取src，需要保证下载链接直接指向你生成的Blob对应的对象地址，避免错拿其他页面资源的链接

很多开发者以为把MediaRecorder的mimeType设置为audio/wav就会得到合规的WAV文件，实际主流浏览器的实现都省略了WAV头的拼接步骤，哪怕MIME类型声明正确，输出的也是没有结构的裸PCM流。如果不想手动拼装WAV字节结构，也可以选择MediaRecorder支持的、自带容器封装的格式（比如WebM/Opus、MP3），这类格式的编码输出会自动写入容器头的元数据，不需要手动处理底层字节逻辑。

内容的提问来源于stack exchange，提问作者Sound in Worship