Search code examples
javascriptvuejs3web-audio-apiaudio-recordingvoice-recording

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

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.

enter image description here

enter image description here

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.

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).

Solution

  • 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:

    Edit webaudiorecorder-vue-3-not-working-forked-x2vgq7