Web Audio Worker Example - Messaging

main.js

class OffsetNode {
    constructor (context) {
        this.context = context;
        this.worker = this.context.createAudioWorker("worker.js");
        this.node = this.context.createScriptProcessor(this.worker);
        this.initializeQueue();
    }

    initializeQueue () {
        this.getOffsetQueue = [];
        this.worker.onmessage = (event) => {
            if ( !event.data || event.data.type !== "offset" ) {
                return;
            }

            this.getOffsetQueue.shift()(event.data.offset);
        };
    }

    setOffset (offset) {
        this.worker.postMessage({
            type: "setOffset",
            offset: offset
        });
    }

    getOffset () {
        let deferred = Promise.defer();

        this.getOffsetQueue.push(function (value) {
            deferred.resolve(value);
        });

        this.worker.postMessage({
            type: "getOffset"
        });

        return deferred.promise;
    }
}

let context = new AudioContext();

let offsetNode = new OffsetNode(context);
let oscillator = context.createOscillator();
let lfo = context.createOscillator();

offsetNode.node.connect(oscillator.detune);
lfo.connect(oscillator.detune);
oscillator.connect(context.destination);

lfo.frequency.setValueAtTime(5, context.currentTime);

offsetNode.setOffset(5);

offsetNode.getOffset().then(function (offset) {
    console.log(offset); // Output: 5
});

worker.js

let offset = 0;

let addMessageHandler = (type, handler) => {
    this.addEventListener("message", function (event) {
        if ( !event.data || event.data.type !== type ) {
            return;
        }

        return handler(event);
    });
};

this.onaudioprocess = function (event) {
    let buffers = event.data.channels;

    for ( let buffer of buffers ) {
        for ( let i = 0; i < buffer.length; i++ ) {
            buffer[i] = offset;
        }
    }

    event.finish();
};

addMessageHandler("setOffset", function (event) {
    offset = event.data.offset;
});

addMessageHandler("getOffset", (event) => {
    self.postMessage({
        type: "offset",
        offset: offset
    });
});