Docs cleanup and unification (#961)

Author: michalsek

packages/audiodocs/docs/analysis/analyser-node.mdx

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

packages/audiodocs/docs/core/audio-param.mdx

@@ -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 />
 

packages/audiodocs/docs/core/base-audio-context.mdx

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

packages/audiodocs/docs/destinations/audio-destination-node.mdx

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

packages/audiodocs/docs/effects/biquad-filter-node.mdx

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

packages/audiodocs/docs/effects/convolver-node.mdx

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

packages/audiodocs/docs/effects/delay-node.mdx

@@ -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`.
 :::
@@ -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. |

packages/audiodocs/docs/effects/gain-node.mdx

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

packages/audiodocs/docs/effects/stereo-panner-node.mdx

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

packages/audiodocs/docs/effects/wave-shaper-node.mdx

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