Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/audiodocs/docs/worklets/worklet-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function App() {
// here you have access to the number of input channels and the audio data
// audio data is a two dimensional array where first index is the channel number and second is buffer of exactly bufferLength size
// !IMPORTANT: here you can only read audio data any modifications will not be reflected in the audio output of this node
// !VERY IMPORTANT: please read the Known Issue section below
};
const workletNode = audioContext.createWorkletNode(worklet, 1024, 2);
const adapterNode = audioContext.createRecorderAdapter();
Expand All @@ -48,3 +49,14 @@ It has no own properties but inherits from `AudioNode`.

## Methods
It has no own methods but inherits from `AudioNode`.

## Known Issue
It might happen that the worklet side effect is not visible on the UI. For example you have some animated style which depends on some shared value modified in the worklet.
This is happening because microtask queue is not always being flushed properly, bla bla bla...

To workaround this issue just add this line at the end of your worklet callback function:
```ts
requestAnimationFrame(() => {});
```
This will ensure that microtask queue is flushed and your UI will be updated properly. But be aware that this might have some performance implications so it is not included by default.
So use this only after confirming that your worklet side effects are not visible on the UI.
8 changes: 0 additions & 8 deletions packages/react-native-audio-api/src/core/BaseAudioContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,6 @@ export default class BaseAudioContext {
(buffer) => new Float32Array(buffer)
);
callback(floatAudioData, channelCount);

/// !IMPORTANT Workaround
/// This is required for now because the worklet is run using runGuarded in C++ which does not invoke any interaction with
/// the event queue which means if no task is being scheduled, the worklet's side effect won't happen.
/// So worklet will be called but any of its interactions with the UI thread will not be visible.

/// This forces to flush queue
requestAnimationFrame(() => {});
}
);
return new WorkletNode(
Expand Down
Loading