Search code examples
audio-recordingweb-audio-apivoice-recording

Replacing scriptProcessorNode with AudioWorklet


I am working on recording microphone input from the user and processing it. The problem is that I am using scriptProcessorNode to process data, but here it said that is has been deprecated and replaced with AudioWorklet.The problem is that there is no clear way to replace this functionality with AudioWorklet, and from all of the example projects with AudioWorklets from Google, none of them is doing anything with microphone input. Is there a way to replace this code with Audio Worklet? Here is the code that "should" be replaced.

    // Connect analyser
    this.options.source.connect(this.analyser);
    // Create ScriptProcessorNode
    this.scriptProcessorNode = this.options.context.createScriptProcessor(this.options.bufferLen, numChannels, numChannels);
    // Connect scriptProcessorNode (Theretically, not required)
    this.scriptProcessorNode.connect(this.options.context.destination);
    // Create callback to update/analyze floatFrequencyData
    var self = this;
    this.scriptProcessorNode.onaudioprocess = function (event) {
        self.analyser.getFloatFrequencyData(self.floatFrequencyData);
        self.update();
        self.store(event);
        self.monitor();
    };
    // Connect scriptProcessorNode
    this.options.source.connect(this.scriptProcessorNode);

Solution

  • I have a simple example of creating an AudioWorkletProcessor. You can check it here. It only works on Chromium, Firefox don't have support for AudioWorklet yet.

    It's an example I've prepared to show a webpack error I'm having, so please check only the source code. If you run the project it will fail unless you comment audio-meter.js line 8 and uncomment line 11. The file audio-meter.worker.js is duplicated with the same content.