Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
0c0548d
feat: docs cleanup season 02 episode 01
michalsek Feb 20, 2026
e7adf21
feat: detailbox styling fixes
michalsek Feb 23, 2026
537604e
fix: filter list
michalsek Feb 23, 2026
3f2904b
feat: cleanup landing components
michalsek Feb 23, 2026
3a6aa03
feat: cleanup unused or doubled components
michalsek Feb 23, 2026
7e82d44
feat: reusable switch
michalsek Feb 23, 2026
8a95057
feat: landing widget - responsive & retina
michalsek Feb 23, 2026
1cf353d
feat: biquad examples
michalsek Feb 23, 2026
e0e31c3
feat: examples guides and unicorns
michalsek Feb 23, 2026
d089c5a
feat: interactive examples
michalsek Feb 23, 2026
f20fa06
fix: interactive examples
michalsek Feb 23, 2026
a6304ae
fix: compatibility
michalsek Feb 23, 2026
7f9f0ac
fix: properties tables unified, adsr/osc/wave ui improvements
michalsek Feb 23, 2026
2323334
fix: prop tab tag color
michalsek Feb 23, 2026
f5372c2
fix: sizing
michalsek Feb 23, 2026
564fe10
docs: remove a dead link
mdydek Mar 2, 2026
f276c2b
docs: turned down volume in white noise
mdydek Mar 2, 2026
6b3f2d0
Merge branch 'main' into fix/docs-ui-ux-and-ix
maciejmakowski2003 Mar 11, 2026
8c61fd1
Merge branch 'main' into fix/docs-ui-ux-and-ix
maciejmakowski2003 Mar 11, 2026
031db22
chore: yarn.lock
maciejmakowski2003 Mar 11, 2026
bfa41d0
fix: yarn build and fixes for broken anchors in docs
maciejmakowski2003 Mar 11, 2026
78aa601
Merge branch 'main' into fix/docs-ui-ux-and-ix
michalsek Mar 30, 2026
5fed55f
fix: ui fixes in docs - colors, typos, errors in code and misused sec…
michalsek Mar 30, 2026
5be011d
fix: playgrounds and wiz
michalsek Mar 30, 2026
35298ea
fix: radon? + top promo rotator
michalsek Mar 30, 2026
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
6 changes: 2 additions & 4 deletions packages/audiodocs/docs/analysis/analyser-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@ import { Optional, ReadOnly } from '@site/src/components/Badges';
The `AnalyserNode` interface represents a node providing two core functionalities: extracting time-domain data and frequency-domain data from audio signals.
It is an [`AudioNode`](/docs/core/audio-node) that passes the audio data unchanged from input to output, but allows to take passed data and process it.

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"max"} channelInterpretation={"speakers"} />

#### Time domain vs Frequency domain

![time-domain-vs-frequency-domain](/img/time_domain_vs_frequency_domain.jpg)
Expand Down Expand Up @@ -45,6 +41,8 @@ Or by using `BaseAudioContext` factory method:

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="max" channelInterpretation="speakers" />

| Name | Type | Description | |
| :----: | :----: | :-------- | :-: |
| `fftSize` | `number` | Integer value representing size of [Fast Fourier Transform](https://en.wikipedia.org/wiki/Fast_Fourier_transform) used to determine frequency domain. In general it is size of returning time-domain data. |
Expand Down
2 changes: 1 addition & 1 deletion packages/audiodocs/docs/core/audio-param.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ The change begins at the time designated for the previous event. It follows an e
### `setTargetAtTime`

Schedules a gradual change to the new value at the start time.
This method is useful for decay or release portions of [ADSR envelopes](/docs/effects/gain-node#envelope---adsr).
This method is useful for decay or release portions of [ADSR envelopes](/docs/effects/gain-node#advanced-usage--envelope-adsr).

<SetTargetAtTimeChart />

Expand Down
18 changes: 8 additions & 10 deletions packages/audiodocs/docs/core/base-audio-context.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ Creates [`PeriodicWave`](/docs/effects/periodic-wave). This waveform specifies a
| :---: | :---: | :---- |
| `real` | `Float32Array` | An array of cosine terms. |
| `imag` | `Float32Array` | An array of sine terms. |
| `constraints` <Optional /> | [`PeriodicWaveConstraints`](/docs/core/base-audio-context#periodicwaveconstraints) | An object that specifies if normalization is disabled. If so, periodic wave will have maximum peak value of 1 and minimum peak value of -1.|
| `constraints` <Optional /> | `{ disableNormalization: boolean }` | An object that specifies if normalization is disabled. If so, periodic wave will have maximum peak value of 1 and minimum peak value of -1.|

#### Errors

Expand Down Expand Up @@ -317,19 +317,17 @@ const buffer = await this.audioContext.decodeAudioData(data, 4800, 2, false);

### `ContextState`

<details>
<summary>Details</summary>

**Acceptable values:**
- `suspended`
- `suspended`

The audio context has been suspended (with one of [`suspend`](/docs/core/audio-context#suspend) or [`OfflineAudioContext.suspend`](/docs/core/offline-audio-context#suspend)).
The audio context has been suspended (with one of [`suspend`](/docs/core/audio-context#suspend) or [`OfflineAudioContext.suspend`](/docs/core/offline-audio-context#suspend)).

- `running`
- `running`

The audio context is running normally.
The audio context is running normally.

- `closed`
- `closed`

The audio context has been closed (with [`close`](/docs/core/audio-context#close) method).

The audio context has been closed (with [`close`](/docs/core/audio-context#close) method).
</details>
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@ Each `AudioContext` has exactly one AudioDestinationNode, which can be accessed
[`AudioContext.destination`](/docs/core/base-audio-context/#properties) property.


#### [`AudioNode`](/docs/core/audio-node#read-only-properties) properties
<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={0} channelCount={2} channelCountMode={"explicit"} channelInterpretation={"speakers"} />

## Properties

`AudioDestinationNode` does not define any additional properties.
It inherits all properties from [`AudioNode`](/docs/core/audio-node), listed above.

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={0} channelCount={2} channelCountMode="explicit" channelInterpretation="speakers" />

## Methods

`AudioDestinationNode` does not define any additional methods.
Expand Down
46 changes: 26 additions & 20 deletions packages/audiodocs/docs/effects/biquad-filter-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,18 @@
sidebar_position: 1
---

import AudioNodePropsTable from "@site/src/components/AudioNodePropsTable"
import { Optional, ReadOnly } from '@site/src/components/Badges';
import InteractiveExample from '@site/src/components/InteractiveExample';
import AudioApiExample from '@site/src/components/AudioApiExample'
import VinylPlayer from '@site/src/components/RecordPlayerExample/VinylAnimation';

import AudioNodePropsTable from "@site/src/components/AudioNodePropsTable"
import FrequencyResponseGraph from '@site/src/examples/Biquad/FrequencyResponseGraph';
import VinylPlayer from '@site/src/examples/VinylPlayer';

# BiquadFilterNode


The `BiquadFilterNode` interface represents a low-order filter. It is an [`AudioNode`](/docs/core/audio-node) used for tone controls, graphic equalizers, and other audio effects.
Multiple `BiquadFilterNode` instances can be combined to create more complex filtering chains.


<VinylPlayer/>


#### [`AudioNode`](/docs/core/audio-node#read-only-properties) properties
<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"max"} channelInterpretation={"speakers"} />
<VinylPlayer />

## Constructor

Expand All @@ -46,16 +40,30 @@ Or by using `BaseAudioContext` factory method:

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="max" channelInterpretation="speakers" />

| Name | Type | Rate | Description |
| :--: | :--: | :----------: | :-- |
| `frequency` | [`AudioParam`](/docs/core/audio-param) | [`k-rate`](/docs/core/audio-param#a-rate-vs-k-rate) | The filter’s cutoff or center frequency in hertz (Hz). |
| `detune` | [`AudioParam`](/docs/core/audio-param) | [`k-rate`](/docs/core/audio-param#a-rate-vs-k-rate) | Amount by which the frequency is detuned in cents. |
| `Q` | [`AudioParam`](/docs/core/audio-param) | [`k-rate`](/docs/core/audio-param#a-rate-vs-k-rate) | The filter’s Q factor (quality factor). |
| `gain` | [`AudioParam`](/docs/core/audio-param) | [`k-rate`](/docs/core/audio-param#a-rate-vs-k-rate) | Gain applied by specific filter types, in decibels (dB). |
| `type` | [`BiquadFilterType`](#biquadfiltertype-enumeration-description) | — | Defines the kind of filtering algorithm the node applies (e.g. `"lowpass"`, `"highpass"`). |
| `Q` | [`AudioParam`](/docs/core/audio-param) | [`k‑rate`](/docs/core/audio-param#a-rate-vs-k-rate) | The filter’s Q factor (quality factor). |
| `detune` | [`AudioParam`](/docs/core/audio-param) | [`k‑rate`](/docs/core/audio-param#a-rate-vs-k-rate) | Amount by which the frequency is detuned in cents. |
| `frequency` | [`AudioParam`](/docs/core/audio-param) | [`k‑rate`](/docs/core/audio-param#a-rate-vs-k-rate) | The filter’s cutoff or center frequency in hertz (Hz). |
| `gain` | [`AudioParam`](/docs/core/audio-param) | [`k‑rate`](/docs/core/audio-param#a-rate-vs-k-rate) | Gain applied by specific filter types, in decibels (dB). |
| `type` | [`BiquadFilterType`](#biquadfiltertype-enumeration-description) | | Defines the kind of filtering algorithm the node applies (e.g. "lowpass", "highpass"). |

<br />

<br />

<br />

#### BiquadFilterType enumeration description
Note: The detune parameter behaves the same way for all filter types, so it is not repeated below.

<FrequencyResponseGraph />

<br />

<br />

| `type` | Description | `frequency` | `Q` | `gain` |
|:------:|:-----------:|:-----------:|:---:|:------:|
| `lowpass` | Second-order resonant lowpass filter with 12dB/octave rolloff. Frequencies below the cutoff pass through; higher frequencies are attenuated. | The cutoff frequency. | Determines how peaked the frequency is around the cutoff. Higher values result in a sharper peak. | Not used |
Expand All @@ -67,10 +75,8 @@ Note: The detune parameter behaves the same way for all filter types, so it is n
| `notch` | Notch (band-stop) filter. Opposite of a bandpass filter: frequencies around the center are attenuated; others remain unchanged. | The center of the frequency range where the notch is applied. | Controls the bandwidth. Higher values result in a narrower band. | Not used |
| `allpass` | Second-order allpass filter. All frequencies pass through, but changes the phase relationship between the various frequencies. | The frequency where the center of the phase transition occurs (maximum group delay). | Controls how sharp the phase transition is at the center frequency. Higher values result in a sharper transition and a larger group delay. | Not used |

Note: The detune parameter behaves the same way for all filter types, so it is not included above

import FrequencyResponseGraph from '@site/src/examples/Biquad/FrequencyResponseGraph';

<AudioApiExample component={FrequencyResponseGraph} />

## Methods

Expand Down
5 changes: 2 additions & 3 deletions packages/audiodocs/docs/effects/convolver-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import { Optional } from '@site/src/components/Badges';
The `ConvolverNode` interface represents a linear convolution effect, that can be applied to a signal given an impulse response.
This is the easiest way to achieve `echo` or [`reverb`](https://en.wikipedia.org/wiki/Reverb_effect) effects.

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"clamped-max"} channelInterpretation={"speakers"} />

:::info
Convolver is a node with tail-time, which means, that it continues to output non-silent audio with zero input for the length of the buffer.
Expand Down Expand Up @@ -40,6 +37,8 @@ Or by using `BaseAudioContext` factory method:

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="clamped-max" channelInterpretation="speakers" />

| Name | Type | Description |
| :----: | :----: | :-------- |
| `buffer` | [`AudioBuffer`](/docs/sources/audio-buffer) | Associated AudioBuffer. |
Expand Down
6 changes: 2 additions & 4 deletions packages/audiodocs/docs/effects/delay-node.mdx
Comment thread
michalsek marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@ import { ReadOnly } from '@site/src/components/Badges';
The `DelayNode` interface represents the latency of the audio signal by given time. It is an [`AudioNode`](/docs/core/audio-node) that applies time shift to incoming signal f.e.
if `delayTime` value is 0.5, it means that audio will be played after 0.5 seconds.

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"max"} channelInterpretation={"speakers"} />

:::info
Delay is a node with tail-time, which means, that it continues to output non-silent audio with zero input for the duration of `delayTime`.
:::
Expand All @@ -26,6 +22,8 @@ Delay is a node with tail-time, which means, that it continues to output non-sil

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="max" channelInterpretation="speakers" />

| Name | Type | Description |
| :----: | :----: | :-------- |
| `delayTime`| <ReadOnly /> [`AudioParam`](/docs/core/audio-param) | [`k-rate`](/docs/core/audio-param#a-rate-vs-k-rate) `AudioParam` representing value of time shift to apply. |
Expand Down
8 changes: 3 additions & 5 deletions packages/audiodocs/docs/effects/gain-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ The `GainNode` interface represents a change in volume (amplitude) of the audio
Direct, immediate gain changes often cause audible clicks. Use the scheduling methods of [`AudioParam`](/docs/core/audio-param) (e.g. `linearRampToValueAtTime`, `exponentialRampToValueAtTime`) to smoothly interpolate volume transitions.
:::

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"max"} channelInterpretation={"speakers"} />

## Constructor

```tsx
Expand All @@ -37,6 +33,8 @@ You can also create a `GainNode` via the [`BaseAudioContext.createGain()`](/docs

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="max" channelInterpretation="speakers" />

| Name | Type | Description | |
| :----: | :----: | :-------- | :-: |
| `gain` | [`AudioParam`](/docs/core/audio-param) | [`a-rate`](/docs/core/audio-param#a-rate-vs-k-rate) `AudioParam` representing the gain value to apply. | <ReadOnly /> |
Expand Down Expand Up @@ -78,4 +76,4 @@ gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 2);

## Advanced usage — Envelope (ADSR)

`GainNode` is the key building block for implementing sound envelopes. For a practical, step-by-step walkthrough of ADSR envelopes and how to apply them in a real app, see the [Making a piano keyboard](/docs/guides/making-a-piano-keyboard#envelopes-) guide.
`GainNode` is the key building block for implementing sound envelopes. For a practical, step-by-step walkthrough of ADSR envelopes and how to apply them in a real app, see the [Making a piano keyboard](/docs/guides/making-a-piano-keyboard#envelopes-%EF%B8%8F) guide.
6 changes: 2 additions & 4 deletions packages/audiodocs/docs/effects/stereo-panner-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ import { Optional, ReadOnly } from '@site/src/components/Badges';

The `StereoPannerNode` interface represents the change in ratio between two output channels (f. e. left and right speaker).

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"clamped-max"} channelInterpretation={"speakers"} />

## Constructor

```tsx
Expand All @@ -34,6 +30,8 @@ Or by using `BaseAudioContext` factory method:

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="clamped-max" channelInterpretation="speakers" />

| Name | Type | Description |
| :--: | :--: | :---------- |
| `pan` | [`AudioParam`](/docs/core/audio-param) | [`a-rate`](/docs/core/audio-param#a-rate-vs-k-rate) `AudioParam` representing how the audio signal is distributed between the left and right channels. |
Expand Down
5 changes: 2 additions & 3 deletions packages/audiodocs/docs/effects/wave-shaper-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import { ReadOnly, Optional } from '@site/src/components/Badges';
The `WaveShaperNode` interface represents non-linear signal distortion effects.
Non-linear distortion is commonly used for both subtle non-linear warming, or more obvious distortion effects.

#### [`AudioNode`](/docs/core/audio-node#properties) properties

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode={"clamped-max"} channelInterpretation={"speakers"} />

## Constructor

Expand All @@ -36,6 +33,8 @@ Or by using `BaseAudioContext` factory method:

It inherits all properties from [`AudioNode`](/docs/core/audio-node#properties).

<AudioNodePropsTable numberOfInputs={1} numberOfOutputs={1} channelCount={2} channelCountMode="clamped-max" channelInterpretation="speakers" />

| Name | Type | Description |
| :--: | :--: | :---------- |
| `curve` | `Float32Array \| null` | The shaping curve used for waveshaping effect. |
Expand Down
2 changes: 2 additions & 0 deletions packages/audiodocs/docs/fundamentals/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ Add `react-native-audio-api` expo plugin to your `app.json` or `app.config.js`.
```
</details>

<br />

<details>
<summary>app.config.js</summary>
```javascript
Expand Down
5 changes: 0 additions & 5 deletions packages/audiodocs/docs/fundamentals/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@ sidebar_position: 1

React Native Audio API is an imperative, high-level API for processing and synthesizing audio in React Native Applications. React Native Audio API follows the [Web Audio Specification](https://www.w3.org/TR/webaudio-1.1/) making it easier to write audio-heavy applications for iOS, Android and Web with just one codebase.

import OscillatorSquare from '@site/src/components/OscillatorSquare';

<OscillatorSquare />
Comment thread
michalsek marked this conversation as resolved.


## Highlights

- Supports react-native, react-native-web or any web react based project
Expand Down
13 changes: 9 additions & 4 deletions packages/audiodocs/docs/guides/create-your-own-effect.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ The most important file is `MyProcessorNode.cpp`, it contains main processing pa
In this guide, we will edit files in order to achieve [`GainNode`](/docs/effects/gain-node) functionality.
For the sake of a simplicity, we will use value as a raw `double` type, not wrapped in [`AudioParam`](/docs/core/audio-param).

<details>
<details open>
<summary>MyProcessorNode.h</summary>

```cpp
Expand All @@ -49,7 +49,7 @@ namespace audioapi {

class MyProcessorNode : public AudioNode {
public:
explicit MyProcessorNode(const std::shared_ptr<BaseAudioContext> &context, );
explicit MyProcessorNode(const std::shared_ptr<BaseAudioContext> &context);

protected:
std::shared_ptr<DSPAudioBuffer>
Expand All @@ -61,11 +61,14 @@ private:
double gain; // value responsible for gain value
// highlight-end
};

} // namespace audioapi
```
</details>

<details>
<br />

<details open>
<summary>MyProcessorNode.cpp</summary>

```cpp
Expand Down Expand Up @@ -96,7 +99,9 @@ namespace audioapi {
```
</details>

<details>
<br />

<details open>
<summary>MyProcessorNodeHostObject.h</summary>

```cpp
Expand Down
9 changes: 6 additions & 3 deletions packages/audiodocs/docs/guides/making-a-piano-keyboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ sidebar_position: 3
---

import InteractiveExample from '@site/src/components/InteractiveExample';
import InteractivePlayground from '@site/src/components/InteractivePlayground';
import { useGainAdsrPlayground } from '@site/src/components/InteractivePlayground/GainAdsrExample/useGainAdsrPlayground';


# Making a piano keyboard

Expand Down Expand Up @@ -214,7 +213,11 @@ An envelope describes how a sound's amplitude changes over time. The most widely
- **Sustain** — volume level held while the note is active.
- **Release** — time to fade out after the note ends.

<InteractivePlayground usePlayground={useGainAdsrPlayground} />

import InteractivePlayground from '@site/src/components/InteractivePlayground';
import { useGainAdsrPlayground } from '@site/src/components/InteractivePlayground/GainAdsrExample/useGainAdsrPlayground';

<InteractivePlayground usePlayground={useGainAdsrPlayground} tag="ADSR Envelope" />

You can read more about envelopes and ADSR on [Wikipedia](<https://en.wikipedia.org/wiki/Envelope_(music)>).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The `AudioBufferQueueSourceNode` is an [`AudioBufferBaseSourceNode`](/docs/sourc

## Constructor

[`BaseAudioContext.createBufferQueueSource(options: AudioBufferBaseSourceNodeOptions)`](/docs/core/base-audio-context#createbufferqueuesource)
[`BaseAudioContext.createBufferQueueSource(options: AudioBufferBaseSourceNodeOptions)`](/docs/core/base-audio-context#createbufferqueuesource-)

```jsx
interface AudioBufferBaseSourceNodeOptions {
Expand Down
Loading
Loading