# Spontaneous Issues with AudioWorklet In REACT/JS environment

**URL:** <https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189>\
**Category:** FMOD Engine\
**Created:** [February 1, 2024, 10:01pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189 "2024-02-01T22:01:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 1, 2024, 10:01pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/1 "2024-02-01T22:01:53Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 1, 2024, 11:39pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/3 "2024-02-01T23:39:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 2, 2024, 8:10pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/4 "2024-02-02T20:10:34Z")

</div>

Can a mechanism be implemented in FMOD to prevent this?

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 4, 2024, 12:37am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/5 "2024-02-04T00:37:47Z")

</div>

Bump

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 5, 2024, 5:03am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/6 "2024-02-05T05:03:56Z")

</div>

It seems that the `AudioWorkletProcessor` is being given an empty channel in its [`output`](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor/process#outputs) 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?

---

<div class="post-metadata">

**Author:** ![alexzzen](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/alexzzen/32/6825_2.png) [@alexzzen](https://qa.fmod.com/u/alexzzen)\
**Post date:** [February 5, 2024, 11:03am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/7 "2024-02-05T11:03:30Z")

</div>

This happened to us during a jam last week. Only happened on Chrome 121. Latest FMOD/Unity version. Related issue: [Chromium](https://issues.chromium.org/issues/41494193)

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 5, 2024, 11:55am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/8 "2024-02-05T11:55:37Z")

</div>

- 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.

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 5, 2024, 11:22pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/9 "2024-02-05T23:22:49Z")

</div>

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.

```auto
...
"}",
"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.

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 6, 2024, 12:20am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/10 "2024-02-06T00:20:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 6, 2024, 12:56am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/11 "2024-02-06T00:56:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leonardo98](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@leonardo98](https://qa.fmod.com/u/leonardo98)\
**Post date:** [February 6, 2024, 11:20am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/12 "2024-02-06T11:20:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 6, 2024, 11:14pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/13 "2024-02-06T23:14:05Z")

</div>

If you are linking to the w32 libraries directly then your only option for now is to change your [output mode](https://fmod.com/docs/2.02/api/platforms-html5.html#output-modes) to [`FMOD_OUTPUTTYPE_WEBAUDIO`](https://fmod.com/docs/2.02/api/core-api-system.html#fmod_outputtype_webaudio).  
This would also apply to anyone building to WebGL from Unity.

---

<div class="post-metadata">

**Author:** ![Bobaka](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Bobaka](https://qa.fmod.com/u/Bobaka)\
**Post date:** [February 7, 2024, 1:06am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/14 "2024-02-07T01:06:26Z")

</div>

> [@jeff\_fmod](#):
>
> `"if (output.length == 0) { return true; }"`

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!

---

<div class="post-metadata">

**Author:** ![leonardo98](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@leonardo98](https://qa.fmod.com/u/leonardo98)\
**Post date:** [February 7, 2024, 8:45am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/15 "2024-02-07T08:45:04Z")

</div>

> [@jeff\_fmod](#):
>
> If you are linking to the w32 libraries directly then your only option for now is to change your [output mode](https://fmod.com/docs/2.02/api/platforms-html5.html#output-modes) to [`FMOD_OUTPUTTYPE_WEBAUDIO`](https://fmod.com/docs/2.02/api/core-api-system.html#fmod_outputtype_webaudio).  
> This would also apply to anyone building to WebGL from Unity.

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

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 7, 2024, 10:14pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/16 "2024-02-07T22:14:16Z")

</div>

Thank you for giving that a shot.

> [@leonardo98](#):
>
> mStartInterval is not defined

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.

---

<div class="post-metadata">

**Author:** ![leonardo98](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@leonardo98](https://qa.fmod.com/u/leonardo98)\
**Post date:** [February 9, 2024, 5:21pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/17 "2024-02-09T17:21:04Z")

</div>

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).

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

```

---

<div class="post-metadata">

**Author:** ![leonardo98](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@leonardo98](https://qa.fmod.com/u/leonardo98)\
**Post date:** [February 12, 2024, 5:09pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/18 "2024-02-12T17:09:11Z")

</div>

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](https://youtu.be/URY9Syyb-iY)  
new version(107.0.5045.15) - 50% cases sound this - [https://youtu.be/ZJXXPdWDU50](https://youtu.be/ZJXXPdWDU50)  
sorry - I can not post link to the game, it’s under development  
`Windows 10 64-bit`

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 12, 2024, 10:34pm UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/19 "2024-02-12T22:34:08Z")

</div>

These sort of discontinuities generally indicate an issue with the size of one of your audio buffers: [Audio Stability (Stuttering)](https://fmod.com/docs/2.02/api/platforms-html5.html#audio-stability-stuttering).  
Can you please try calling [`System::setDSPBufferSize`](https://fmod.com/docs/2.02/api/core-api-system.html#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.

---

<div class="post-metadata">

**Author:** ![leonardo98](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@leonardo98](https://qa.fmod.com/u/leonardo98)\
**Post date:** [February 15, 2024, 8:05am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/20 "2024-02-15T08:05:15Z")

</div>

video abover - [https://youtu.be/ZJXXPdWDU50](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

---

<div class="post-metadata">

**Author:** ![jeff\_fmod](https://yyz2.discourse-cdn.com/flex036/user_avatar/qa.fmod.com/jeff_fmod/32/1766_2.png) [@jeff\_fmod](https://qa.fmod.com/u/jeff_fmod)\
**Post date:** [February 19, 2024, 3:14am UTC](https://qa.fmod.com/t/spontaneous-issues-with-audioworklet-in-react-js-environment/21189/21 "2024-02-19T03:14:45Z")

</div>

Have you noticed whether all sounds are affected globally or if it’s just this background music?  
It’s possible your [Streaming settings](https://fmod.com/docs/2.02/api/core-guide.html#streaming-settings) require additional configuration if only the background music is stuttering. Can you please try calling [`System.setStreamBufferSize`](https://fmod.com/docs/2.02/api/core-api-system.html#system_setstreambuffersize) with a larger value, perhaps 32768 [TIMEUNIT\_RAWBYTES](https://fmod.com/docs/2.02/api/core-api-common.html#fmod_timeunit_rawbytes), and see if that helps with the stuttering at all?