I am currently focused on developing a method to load AudioWorklet processors using OfflineAudioContext objects. My goal is to pre-generate and present visual data related to sounds that will eventually be played for the user.
My approach involves utilizing an OfflineAudioContext, with the intention of writing processor.js to store the generated audio, though this phase is still in progress.
Currently, I am working in Chrome and have not yet discovered a way to use AudioContext with Firefox or Safari browsers.
// within Sound object #1
const offlineCtx1 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx1.audioWorklet.addModule("processor.js")
.then(() => log("first context loaded the processor"));
// ...
// within Sound object #2
const offlineCtx2 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx2.audioWorklet.addModule("processor.js")
.then(() => log("second context loaded the processor"));
An issue arises when attempting to add the module to two different contexts. If the inspector is closed, the page loads smoothly. However, if the inspector is open, the browser tab freezes to some extent. Interaction with the page becomes impossible, although limited actions can be performed within the inspector.
This seems to be a timing issue: waiting for 1000ms or initiating the second addModule() call through user interaction resolves the problem effectively.
One workaround I have found is to create a promise chain from the .addModule() call, ensuring that one is completed before the next begins.
To avoid simultaneous module addition by separate audio context objects, an elaborate process of weaving Promises through objects is necessary. While the code may appear simple in isolation, managing multiple audio context modules in an application requires intricate coordination:
const offlineCtx1 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx1.audioWorklet.addModule("processor.js")
.then(() => log("first context loaded the processor") )
.then(() => {
const offlineCtx2 = new OfflineAudioContext(2, 44100, 44100);
return offlineCtx2.audioWorklet.addModule("processor.js")
})
.then(() => log("second context loaded the processor") );
The necessity of sequential execution suggests a timing-related issue. I am running Chrome v69.0.3497.100 (Official Build) (64-bit).
If anyone has insights into why this behavior occurs or suggestions for further debugging, it would be greatly appreciated. Unfortunately, the Chrome Inspector does not provide significant information once the freezing occurs.
Examples:
- Promise chain -- should not freeze Chrome
- No promise chain -- might cause Chrome tab to freeze, especially with the inspector open