Debugging in AudioWorklet fails

[scorio-dev]

Emscripten generated code running in an AudioWorklet fails in the browser when debug option (-g4) and source map creation (--source-map-base) are set.

I started from Googel's WebAudio with Audio Worklet sample located at https://github.com/GoogleChromeLabs/web-audio-samples.git. Running the WebAudio sample out of the box using EMSDK 1.39.14. Everything works fine.

However, when changing the optimization from -O1 to anything else (-O0, -O2) or using -g4 in combination with --source-map-base instead, the application fails when loading the Audio Worklet with errors popping up in the browser's console.

What am I missing?

This is the Makefile from web-audio-samples with my changes to make the emscripten code debuggable:

DEPS = SimpleKernel.cc

build: $(DEPS)
    @/home/johannes/workspace/emsdk/upstream/emscripten/emcc --bind -g4 \
        --source-map-base https://myhost/web-audio-samples/audio-worklet/design-pattern/wasm \
        -s WASM=1 \
        -s BINARYEN_ASYNC_COMPILATION=0 \
        -s SINGLE_FILE=1 \
        SimpleKernel.cc \
        -o simple-kernel.wasmmodule.js \
        --post-js ../lib/em-es6-module.js

clean:
    @rm -f simple-kernel.wasmmodule.js

Error messages from browser's console:
Uncaught TypeError: Cannot assign to read only property '__wasm_call_ctors' of object '[object Object]'
    at simple-kernel.wasmmodule.js:3794
(anonymous) @ simple-kernel.wasmmodule.js:3794
(index):34 Uncaught (in promise) DOMException: Failed to construct 'AudioWorkletNode': AudioWorkletNode cannot be created: The node name 'wasm-worklet-processor' is not defined in AudioWorkletGlobalScope.
    at demoCode (https://myhost/web-audio-samples/audio-worklet/design-pattern/wasm/:34:26)
demoCode @ (index):34
async function (async)
demoCode @ (index):32
DemoRunner.eButton.onclick @ Components.js:263
DevTools failed to load SourceMap: Could not load content for https://myhost/web-audio-samples/audio-worklet/design-pattern/wasm{{{ FILENAME_REPLACEMENT_STRINGS_WASM_BINARY_FILE }}}.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[scorio-dev]

To compare the compilation with different compiler options, please follow these links:

Compiled by me with -g4; https://ssc.scorio.com/web-audio-samples/audio-worklet/design-pattern/wasm/

Compiled by Google with -O1: https://googlechromelabs.github.io/web-audio-samples/audio-worklet/design-pattern/wasm/

[kripken]

I think this may be related to the issue of the exports being a read-only object, and AudioWorklet and other environments are more strict about that (is it an ES6 module environment)?

@sbc100 is working on this, https://github.com/emscripten-core/emscripten/pull/11048

[scorio-dev]

Hi Kripken, thanks for your hint. Google's WebAudio Worklet sample includes the emscpripten compiled code vi ES6 import into the AudioWorkletProcessor JavaScript file.

I turned it around and append (via --post-js) the AudioWorkletProcessor JavaScript file into the emscripten compiled code. So this works without ES6 modules.

Good news: The worklet runs now fine in Firefox 76 which seems to not support ES6 modules in worklets.

Bad news: Debugging is still not possible. -O1 is the only option this works.

A quick demo of our MIDI file player with worklet: https://ssc.scorio.com/localtest.html Using the player with worklet as MIDI Synth: https://ssc.scorio.com/localsynth.html

[stale[bot]]

This issue has been automatically marked as stale because there has been no activity in the past year. It will be closed automatically if no further activity occurs in the next 30 days. Feel free to re-open at any time if this issue is still relevant.