clearTimeout undefined with Audio Worklet API

[yaboypax]

What's up y'all, I've been having a problem trying to set up an audio process block going by the Audio Worklets Documentation. I am working with the latest Qt and using the emscripten compiler with asyncify and the correct flags set in Cmake, but because of Qt I am limited to version emscripten 3.1.50, which is why I wanted to come here and ask rather than opening an issue.

To make sure it wasn't just the version mismatch, I built the .rst documentation for version 3.1.50 from source and went off of that. Currently what I have (stripped down) is

EM_BOOL Processor::ProcessAudio(int numInputs, const AudioSampleFrame *inputs, int numOutputs, AudioSampleFrame *outputs, int numParams, const AudioParamFrame *params, void *userData)
{
    //process block
}

void Processor::AudioWorkletProcessorCreated(EMSCRIPTEN_WEBAUDIO_T audioContext, int success, void *userData)
{
    // has yet to be called
    int outputChannelCounts[1] = {2};
    EmscriptenAudioWorkletNodeCreateOptions options = {
        .numberOfInputs = 2,
        .numberOfOutputs = 2,
    };

    EMSCRIPTEN_AUDIO_WORKLET_NODE_T workletNode = emscripten_create_wasm_audio_worklet_node(
        audioContext,
        "channel-strip-processor",
        &options,
        &Processor::ProcessAudio,
        userData
        );
    EM_ASM({
    // node connect stuff...
    }, workletNode, audioContext);
}

void Processor::AudioThreadInitialized(EMSCRIPTEN_WEBAUDIO_T context, int success, void* userData)
{
        WebAudioWorkletProcessorCreateOptions opts = {
            .name = "channel-strip-processor",
        };
        emscripten_create_wasm_audio_worklet_processor_async(
            context,
            &opts,
            &Processor::AudioWorkletProcessorCreated,
            userData
            );
}

void Processor::initializeAudioContext()
{
    m_audioContext = emscripten_create_audio_context(0);
    emscripten_start_wasm_audio_worklet_thread_async(
        m_audioContext,
        audioThreadStack,
        sizeof(audioThreadStack),
        Processor::AudioThreadInitialized,
        this
        );

}

What happens is, after initialize audio context is called, the browser calls AudioThreadInitialized, but then after that I get an error

I'm not really a JS web developer so my understanding of setTimout and clearTimeout are limited to just idk they're used as a timer in functions. I'm not sure what would be causing an error specifically at var _emscripten_clear_timeout = clearTimeout; It's pretty difficult to debug with context in the generated javascript.

Thanks for any help.

[sbc100]

You can try building with --minify=0 and/or -O0 to be able to see where the reference is coming from. Once you do that can you attach the full backtrace and a few lines of surrounding code?

[yaboypax]

I don't have much of a stack trace even with those flags just the two places PXConsole.js and PXConsole.aw.js

in PXConsole.js where I get the undefined error it's at var _emscripten_clear_timeout = clearTimeout;

var _emscripten_audio_context_state = contextHandle => {
 assert(EmAudio[contextHandle], `Called emscripten_audio_context_state() on a nonexisting context handle ${contextHandle}`);
 assert(EmAudio[contextHandle] instanceof (window.AudioContext || window.webkitAudioContext), `Called emscripten_audio_context_state() on a context handle ${contextHandle} that is not an AudioContext, but of type ${typeof EmAudio[contextHandle]}`);
 return [ "suspended", "running", "closed", "interrupted" ].indexOf(EmAudio[contextHandle].state);
};

var _emscripten_cancel_animation_frame = id => cancelAnimationFrame(id);

var _emscripten_check_blocking_allowed = () => {
 if (ENVIRONMENT_IS_NODE) return;
 if (ENVIRONMENT_IS_WORKER) return;
 warnOnce("Blocking on the main thread is very dangerous, see https://emscripten.org/docs/porting/pthreads.html#blocking-on-the-main-browser-thread");
};

var _emscripten_clear_timeout = clearTimeout;  // HERE

var EmAudio = {};

var EmAudioCounter = 0;

var emscriptenRegisterAudioObject = object => {
 assert(object, "Called emscriptenRegisterAudioObject() with a null object handle!");
 EmAudio[++EmAudioCounter] = object;
 return EmAudioCounter;
};

var emscriptenGetAudioObject = objectHandle => EmAudio[objectHandle];

and before hitting that, the previous stack trace is in PXConsole.aw.js at the instantiation of the audio worklet AudioWorkletModule(Module); in the following

function createWasmAudioWorkletProcessor(audioParams) {
    class WasmAudioWorkletProcessor extends AudioWorkletProcessor {
        constructor(args) {
            super();
            globalThis.stackAlloc = Module["stackAlloc"];
            globalThis.stackSave = Module["stackSave"];
            globalThis.stackRestore = Module["stackRestore"];
            globalThis.HEAPU32 = Module["HEAPU32"];
            globalThis.HEAPF32 = Module["HEAPF32"];
            let opts = args.processorOptions;
            this.callbackFunction = Module["wasmTable"].get(opts["cb"]);
            this.userData = opts["ud"]
        }
        static get parameterDescriptors() {
            return audioParams
        }
        process(inputList, outputList, parameters) {
            let numInputs = inputList.length, numOutputs = outputList.length, numParams = 0, i, j, k, dataPtr, stackMemoryNeeded = (numInputs + numOutputs) * 8, oldStackPtr = stackSave(), inputsPtr, outputsPtr, outputDataPtr, paramsPtr, didProduceAudio, paramArray;
            for (i of inputList)
                stackMemoryNeeded += i.length * 512;
            for (i of outputList)
                stackMemoryNeeded += i.length * 512;
            for (i in parameters)
                stackMemoryNeeded += parameters[i].byteLength + 8,
                ++numParams;
            inputsPtr = stackAlloc(stackMemoryNeeded);
            k = inputsPtr >> 2;
            dataPtr = inputsPtr + numInputs * 8;
            for (i of inputList) {
                HEAPU32[k++] = i.length;
                HEAPU32[k++] = dataPtr;
                for (j of i) {
                    HEAPF32.set(j, dataPtr >> 2);
                    dataPtr += 512
                }
            }
            outputsPtr = dataPtr;
            k = outputsPtr >> 2;
            outputDataPtr = (dataPtr += numOutputs * 8) >> 2;
            for (i of outputList) {
                HEAPU32[k++] = i.length;
                HEAPU32[k++] = dataPtr;
                dataPtr += 512 * i.length
            }
            paramsPtr = dataPtr;
            k = paramsPtr >> 2;
            dataPtr += numParams * 8;
            for (i = 0; paramArray = parameters[i++]; ) {
                HEAPU32[k++] = paramArray.length;
                HEAPU32[k++] = dataPtr;
                HEAPF32.set(paramArray, dataPtr >> 2);
                dataPtr += paramArray.length * 4
            }
            if (didProduceAudio = this.callbackFunction(numInputs, inputsPtr, numOutputs, outputsPtr, numParams, paramsPtr, this.userData)) {
                for (i of outputList) {
                    for (j of i) {
                        for (k = 0; k < 128; ++k) {
                            j[k] = HEAPF32[outputDataPtr++]
                        }
                    }
                }
            }
            stackRestore(oldStackPtr);
            return !!didProduceAudio
        }
    }
    return WasmAudioWorkletProcessor
}
class BootstrapMessages extends AudioWorkletProcessor {
    constructor(arg) {
        super();
        globalThis.Module = arg["processorOptions"];
        globalThis.Module["instantiateWasm"] = (info, receiveInstance) => {
            var instance = new WebAssembly.Instance(Module["wasm"],info);
            receiveInstance(instance, Module["wasm"]);
            return instance.exports
        }
        ;
        let p = globalThis["messagePort"] = this.port;
        p.onmessage = msg => {
            let d = msg.data;
            if (d["_wpn"]) {
                if (globalThis.AudioWorkletModule) {
                    AudioWorkletModule(Module);               // HERE
                    delete globalThis.AudioWorkletModule
                }
                registerProcessor(d["_wpn"], createWasmAudioWorkletProcessor(d["audioParams"]));
                p.postMessage({
                    "_wsc": d["callback"],
                    "x": [d["contextHandle"], 1, d["userData"]]
                })
            } else if (d["_wsc"]) {
                Module["wasmTable"].get(d["_wsc"])(...d["x"])
            }
        }
    }
    process() {}
}
registerProcessor("message", BootstrapMessages);

[sbc100]

Ah I see.. so just the reference to emscripten_clear_timeout here is enough to cause problems. I don't think this is even being called.
Can you see why emscripten_clear_timeout is being included in the output? i.e. are there other reference to emscripten_clear_timeout in the generated JS?

[yaboypax]

That's what's been confusing me I haven't inlined any timeouts in js or asm, and this isn't used in the javascript the only thing that happens to emscripten_clear_timeout is it gets exported to wasm further down /** @export */ emscripten_clear_timeout: _emscripten_clear_timeout, and yi: _emscripten_clear_timeout,

[sbc100]

I see. Somewhere in your application (or in Qt there must be call to emscripten_clear_timeout). That in itself should be reasonable, as long is the function isn't actually called in the audio worklet context.

[sbc100]

Can you try with this patch: #23287

[yaboypax]

Of course ! That fixed it, thanks for the help.