Replace createScriptProcessor with AudioWorkletNode

[MariasStory]

Hi @threhe13, I am interested in your solution and want to test it. When I am trying to run it on linux and press recording button, I get:

[Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)
createScriptNode @ webaudio.js:234
init @ webaudio.js:159
createBackend @ wavesurfer.js:725
init @ wavesurfer.js:527
create @ wavesurfer.js:321
(anonymous) @ VM113 preload.js:36
handleStop @ renderer.js:109
stopRec @ renderer.js:119
renderer.js:121 Processor Disconnect called.
renderer.js:134 Recording Stopped...

The error is thrown at line 52 in renderer.js: processor = audioCtx.createScriptProcessor(bufferSize, 1, 1);

Please fix the problem.

[threhe13]

Hi, @MariasStory . Thank you for your attention. :) First, please understand my immature English Skill.

I'm going to fix what you're talk about. The current code is a test version to use tfj. So i recommend using MediaRecorder in renderer.js. But I haven't to test in linux... 😢

[MariasStory]

I am trying npm install and npm start. Still getting errors. Does it work for you?

[threhe13]

Hi @MariasStory

Is the error you say the same as the error above?

I recommend you to clone latest version of this repository. recently, I updated createScriptProcessor to AudioWorklet.

And If you clone this repository(latest version), you'd better install @tensorflow/tfjs Of course, it's still under development...

If you have any other problems, tell me again!

[MariasStory]

Hi @threhe13,

Thanks for following with the request. Keep up with good work.

It seems that your application works. At least, I managed to run it, record and play audio. There was an error in a console, but it did work few times. (I am still not sure what did it do, accept recording audio)

At the moment, it does not work again. The error that I am getting is:

recorder.js:82 Uncaught (in promise) TypeError: Failed to execute 'connect' on 'AudioNode': Overload resolution failed.
    at recorder.js:82
(anonymous) @ recorder.js:82
Promise.then (async)
startRec @ recorder.js:76
bufferProcess.js:14 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at AudioWorkletProcessor._inputProcess (bufferProcess.js:14)
    at AudioWorkletProcessor.process (bufferProcess.js:48)
_inputProcess @ bufferProcess.js:14
process @ bufferProcess.js:48
recorder.js:116 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'stop')
    at HTMLImageElement.stopRec (recorder.js:116)

[threhe13]

Hi, @MariasStory

Thanks for your comment! I forgot to initialize the buffer after recording

I updated and confirmed that is working normally.

You could to clone this repository again Or modify stopRec() function in renderer/recorder.js

streamNode.disconnect(processor);
audioCtx.close().then(function(){
    streamNode = null;
    processor = null;
    audioCtx = null;
    AudioContext = null;
    buffer = []; // Add this line
})

Additionally, I found a problem It seems that the problem was caused by simultaneously using the MediaRecorder used in the visualization test and AudioWorklet processor used to @tensorflow/tfjs

I'll try to fix it as soon as possible.

Thanks for your comment! :)