Is AudioWorklet.addModule logged in the Chrome network console?

838 views Asked by At

I'm testing out some audio worklet code by loading an example module from Github via AudioWorklet.addModule(githubUrl). However when I look at the network tab in developer settings I don't see a network request to Github. I know that it is making the request because it was giving a CORS error before I switched to using raw.githubusercontent address (now it is giving Uncaught (in promise) DOMException: The user aborted a request). I want to be able to inspect what the network call is returning so I can help diagnose the problem.

1

There are 1 answers

0
chrisguttandin On BEST ANSWER

There seems to be a bug in Chrome which prevents the network request from being shown in the dev tools. I think it would be a good idea to file a bug for that.

For now you could just use Firefox. It shows the network request in the dev tools.

If you want to keep using Chrome you can proxy your request with fetch() to make it appear in the devtools.

Instead of calling addModule() directly ...

context.audioWorklet.addModule(url)

... you could fetch the source first and then wrap it into an object URL.

fetch(url)
    .then((response) => response.text())
    .then((text) => {
        const blob = new Blob([text], { type: 'application/javascript; charset=utf-8' });
        const objectUrl = URL.createObjectURL(blob);

        return context.audioWorklet.addModule(objectUrl)
            .finally(() => URL.revokeObjectURL(objectUrl));
    })