WebAudioRecorder在Vue3中报错无法使用，求修复方案或跨浏览器替代库

WebAudioRecorder JS是一款老旧的音频录制库，录制的MP3支持跨平台，暂时没找到更合适的替代方案。它在Vue2中可正常满足需求，但在Vue3中使用时出现报错：

WebAudioRecorder.min.js:1 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': #<Object> could not be cloned. at Proxy.setOptions

错误截图：

相关示例：

• 存在问题的Vue3示例
• 可正常运行的Vue2示例

曾尝试使用vue-audio-recorder，支持跨平台，但配合Deepgram语音转文本服务时会出现音调偏移及转录不稳定的问题。

请问该如何修复此问题？或者是否有支持全浏览器（录制的音频可在所有浏览器正常播放，尤其解决Safari及苹果设备兼容问题）的语音录制库推荐？

一、Vue3中WebAudioRecorder报错的修复方法 #

报错核心原因是Vue3的响应式系统会将传入的对象转为Proxy代理对象，而Proxy对象无法通过postMessage传递给Worker（无法被结构化克隆），Vue2使用的Object.defineProperty不会产生这个问题。

修复步骤：

1. 在传递配置给setOptions前，将响应式对象转为普通对象，解除代理绑定：

   // 方法1：通过JSON序列化转普通对象
   const plainOptions = JSON.parse(JSON.stringify(options))
   recorder.setOptions(plainOptions)
   

   或者使用Vue3内置的toRaw方法：

   import { toRaw } from 'vue'
   const plainOptions = toRaw(options)
   recorder.setOptions(plainOptions)
   

2. 确保传递给Worker的所有数据都是可结构化克隆的类型，避免包含函数、Symbol、Proxy等无法克隆的内容。

二、推荐的跨浏览器音频录制库 #

1. RecordRTC #

• 支持MP3、WAV、OGG等多种格式，对Safari及苹果设备兼容性良好
• API简洁，无需额外Worker配置，支持实时录制与处理
• 录制的音频稳定性高，适配Deepgram等语音转文本服务

2. 原生MediaRecorder API #

• 浏览器原生能力，无需引入第三方库，兼容Safari 14.1+及现代浏览器
• 可录制为WAV/MP3/OGG格式，需自行处理编码与导出逻辑
• 配合Web Audio API可实现自定义音频处理，适合对体积、性能有要求的场景

3. opus-recorder #

• 专注Opus编码，低延迟录制，对移动端（包括苹果设备）优化充分
• 输出文件体积小、音质稳定，适配语音转文本场景
• 文档完善，易于集成到Vue3项目中

内容的提问来源于stack exchange，提问作者Md.Shahinur Alam