Spontaneous Issues with AudioWorklet In REACT/JS environment

FMOD Engine
1

I’ve encountered a sudden and baffling issue in my FMOD-based web application, which has been running smoothly until recently. An error has started appearing, seemingly out of nowhere, linked directly to FMOD’s AudioWorkletProcessor . The error manifests when I attempt to play a sound, particularly after focusing on the app. Here’s the error message I’m consistently seeing:

Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)
at AudioProcessor.process

class AudioProcessor extends AudioWorkletProcessor {
constructor(options) {
super();
this.payload = [null, null];
this.bufferFlag = 0;
this.dataFlag = 0;
this.bufferIndex = 0;
this.bufferSize = 0;
this.channelCount = options.outputChannelCount;
this.port.onmessage = (event)=>{
const {data} = event;
if (data) {
this.payload[this.dataFlag] = new Float32Array(data);
this.bufferSize = data.length / this.channelCount;
} else {
this.payload[this.dataFlag] = null;
}
this.dataFlag ^= 1;
}
;
}
process(inputs, outputs, parameters) {
const output = outputs[0];
if (this.payload[this.bufferFlag]) {
if (this.bufferIndex === 0) {
this.port.postMessage(this.bufferSize);
}
const bufferSliceEnd = this.bufferSize / output[0].length;
const sliceOffset = output[0].length * this.bufferIndex;
for (let channel = 0; channel < output.length; ++channel) {
const outputChannel = output[channel];
const indexOffset = this.bufferSize * channel + sliceOffset;
outputChannel.set(new Float32Array(this.payload[this.bufferFlag].slice(0 + indexOffset, outputChannel.length + indexOffset)));
}
this.bufferIndex++;
if (this.bufferIndex === bufferSliceEnd) {
this.bufferIndex = 0;
this.bufferFlag ^= 1;
}
}
return true;
}
}
registerProcessor(‘audio-processor’, AudioProcessor);

This issue is particularly perplexing because it arises from FMOD’s internal AudioProcessor, which I haven’t modified. My app utilizes FMOD for advanced audio processing, and this setup hasn’t changed in the last two months.

Error Context:

  • The error occurs randomly when activating audio playback.
  • Refreshing the browser sometimes temporarily resolves the issue.
  • Attempts to troubleshoot, including switching branches, browsers, or running environments, haven’t yielded any insights.

Troubleshooting Done:

  • Ensured all FMOD and Web Audio API usage follows best practices.
  • Reviewed recent changes to both my code and FMOD updates, finding no direct correlations.
  • Searched for similar issues within the FMOD community and broader web development forums without success.

Given that the error bubbles up from FMOD’s AudioWorkletProcessor, I’m at a bit of a loss on how to proceed. Has anyone else experienced similar issues, or does anyone have insights into potential causes or solutions?

Any advice, debugging tips, or shared experiences with similar issues would be greatly appreciated. I’m eager to resolve this and get back to smooth audio processing in my app.

Thank you for your time and help!

3

Debugging this on a mobile device
I do not get this error

4

Can a mechanism be implemented in FMOD to prevent this?

5

Bump

6

It seems that the AudioWorkletProcessor is being given an empty channel in its output buffer.
I am not sure what kind of assurances we get on the validity of the output buffer, but it looks like we might need to handle a null case.
To help me reproduce this and suggest a possible workaround for you, can you please tell me:

  • What version of FMOD are you using?
  • What browser you are using?
  • What OS are you using?
7

This happened to us during a jam last week. Only happened on Chrome 121. Latest FMOD/Unity version. Related issue: Chromium

2 Likes
8

  • I have now upgraded to 20220html5 and still receive the issue.
    Previously i was on 2.02.17 (upgraded to see if it fixes the issue)

  • The issue happens on Chrome/Edge/Opera
    What’s weird is that it just started happening all of a sudden. No issues before.

  • I’m using Windows 10.

9

Thank you for the additional information, I can now reproduce this in the latest Chrome.
This seems to be a Chrome bug as @alexzzen mentioned above, but I have informed our Dev team to see if there is anything we can do about it for the time being.

I have found that I can workaround the issue by bailing out of the process function when an empty output buffer is passed in.
The file isn’t very human readable, but if you add the following to fmod.js then empty buffers will be ignored and audio should resume once the output buffer becomes valid.

...
"}",
"if (output.length == 0) { return true; }", // <- Add this line to the string array
"const bufferSliceEnd = this.bufferSize / output[0].length;",
...

There are two of these “const bufferSliceEnd = this.bufferSize / output[0].length;” lines in the file, and you should add the bail out line above both to cover all cases.
Please give that workaround a shot and let me know if you are still encountering any problems.

1 Like
10

Hi Jeff,

Thank you so much for the update and for sharing the workaround. It’s awesome that the team are taking steps to address this. The workaround you’ve provided seems like a clever approach to circumvent the problem for now.

Given the information you’ve shared, I was wondering if you’ve had a chance to test this issue on other browsers like Opera, Edge, or Mozilla Firefox as well? I’ve encountered the issue across multiple browsers, so it might not be isolated to Chrome alone. If it’s not too much trouble, could you please look into this on these other browsers as well? This could help in determining if the problem is broader than a Chrome-specific bug and if similar workarounds might be necessary for other browser environments.

Best regards.

11

It appears to be all Chromium based browsers- Firefox is fine but Opera and Edge also reproduce the problem.

12

have the same issue, but we use
fmod/js/lib/upstream/w32/fmodstudio_wasm.a
to link our emscripten’s project - how we can fix fmodstudio_wasm.a?

13

If you are linking to the w32 libraries directly then your only option for now is to change your output mode to FMOD_OUTPUTTYPE_WEBAUDIO.
This would also apply to anyone building to WebGL from Unity.

14

Hi Jeff,

I’m pleased to let you know that the temporary solution you provided is effective. I’ve noticed a slight decrease in sound quality during some refreshes, but it’s manageable at the moment.

Eagerly anticipating the permanent fix from the team. Appreciate your assistance!

1 Like
15

it does not affect if add call setOutput(FMOD_OUTPUTTYPE_WEBAUDIO) after initialize (flag FMOD_STUDIO_INIT_SYNCHRONOUS_UPDATE is used)
it cause to error “mStartInterval is not defined” if call before initialize

16

Thank you for giving that a shot.

This suggests the FMOD::System object is still trying to use the AudioWorklet output type, perhaps ScriptProcessorNode is no longer supported in your browser?

Otherwise, you should also be able to make the same changes to you generated .js file.
If you search for the two "const bufferSliceEnd = this.bufferSize / output[0].length;" lines and add "if (output.length == 0) { return true; }," before each of them, that should also workaround the issue.

You would have to do that every time you compile though, so for development I would suggest you downgrade your browser for the time being and only make the changes I mentioned for distribution.

1 Like
17

Thank you for your help! We fixed generated js and it’s works (no exceptions with length any more).
But sometimes sound & music still has some glitches-noises(probably we need recheck init’s flags).

Opera One(107.0.5045.15)
Windows 10 64-bit
Chromium:121.0.6167.140
18

It’s not the same issue, but looks linked
I rechecked all fmod init’s flags, make some fixed, but it does not help
may be it not fmod error, but browser’s itself, so it’s just to infrom
after fix of js, 50/50 cases we have audio glitches-noises
checked game with old version of Opera - there were no any problems about month ago
old version(106.0.4998.19) works perfect 100% cases - https://youtu.be/URY9Syyb-iY
new version(107.0.5045.15) - 50% cases sound this - https://youtu.be/ZJXXPdWDU50
sorry - I can not post link to the game, it’s under development
Windows 10 64-bit

19

These sort of discontinuities generally indicate an issue with the size of one of your audio buffers: Audio Stability (Stuttering).
Can you please try calling System::setDSPBufferSize with 2 blocks of 2048 samples and see if that helps at all? Otherwise trying a larger buffer size of 4096 might help, at the cost of some additional latency.

20

video abover - https://youtu.be/ZJXXPdWDU50 - it’s case 2 blocks of 2048
I have checked buffer size up to 8196 (16k - failed setDSPBufferSize)
big buffer make some affect, sounds a little better, but noises still there

PS sometimes refreshing page resolves problem for session
PSS fmod logs has not difference

21

Have you noticed whether all sounds are affected globally or if it’s just this background music?
It’s possible your Streaming settings require additional configuration if only the background music is stuttering. Can you please try calling System.setStreamBufferSize with a larger value, perhaps 32768 TIMEUNIT_RAWBYTES, and see if that helps with the stuttering at all?