Web-audio-Recorder library does not work on vue 3 but works perfectly on vue 2

Question

WebAudioRecorder JS is an old audio recorder library and its recorded mp3 is crossplatform supported. I couldn't find better option to use in my app.

WAR (WebAudioRecorder) works perfectly on vue 2 as we needed. But it shows error while used in vue 3.

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

How can I fix it? Or do you know any other voice recorder library that works on all browsers? i.e.. recorded audio in one browser works on all other browsers. Mostly it fails on Safari and apple devices.

Here are 2 code sandbox for you.

• Vue3 where the issue is: https://codesandbox.io/s/webaudiorecorder-vue-3-not-working-kws35z

• Vue2 Works perfectly https://codesandbox.io/s/webaudiorecorder-in-vue-2-q4xhtd

I have tried vue-audio-recorder. It is supported across platforms but it shifts voice tone and provides unstable transcription while using Deepgram(provides Speech to text service).

Answer 1

It seems like somehow the passed object to setOptions method is turned into a proxy object, i'm not sure why it's like that, i'm not an expert in vue 3, but it's something related to its reactivity. But to fix it, we can just make recorder variable not reactive on the record() method, and assign it to the reactive variable later like so:

Before:

this.recorder = new WebAudioRecorder(input, configs)

After

let recorder = new WebAudioRecorder(input, configs)
...
this.recorder = recorder

Forked sandbox: