|
| 1 | +# React Native Audio Context |
| 2 | + |
| 3 | +## Project goal |
| 4 | + |
| 5 | +The main goal of the project is to reproduce the Web Audio API as accurate as possible in the React Native environment. |
| 6 | + |
| 7 | +## Interfaces |
| 8 | + |
| 9 | +The document introduces the basic interfaces that we want to recreate. |
| 10 | + |
| 11 | +1. [AudioContext](#audiocontext) |
| 12 | +2. [AudioNode](#audionode) |
| 13 | +3. [AudioParam](#audioparam) |
| 14 | +4. [OscillatorNode](#oscillatornode) |
| 15 | +5. [GainNode](#gainnode) |
| 16 | +6. [StereoPannerNode](#stereopannernode) |
| 17 | + |
| 18 | +### AudioContext |
| 19 | + |
| 20 | +The `AudioContext` interface is the underlying audio context that manages the state of the entire audio application. |
| 21 | + |
| 22 | +#### Attributes |
| 23 | + |
| 24 | +- **`destination`**: Output node that is typically connected to speakers. |
| 25 | +- **`sampleRate`**: Audio sampling rate in hertz. |
| 26 | + |
| 27 | +#### Methods |
| 28 | + |
| 29 | +- **`createBuffer()`**: Creates the audio buffer. |
| 30 | +- **`createGain()`**: Creates a gain node. |
| 31 | +- **`createOscillator()`**: Creates an oscillator node. |
| 32 | +- **`createStereoPanner()`**: Creates a stereo panning node. |
| 33 | + |
| 34 | +### AudioNode |
| 35 | + |
| 36 | +The `AudioNode` interface is the base interface for all audio nodes in the audio processing graph. |
| 37 | + |
| 38 | +#### Methods |
| 39 | + |
| 40 | +- **`connect(destination, output, input)`**: Connects the current audio node to another audio node or parameter. |
| 41 | +- **`disconnect(destination, output, input)`**: Disconnects the current audio node from another audio node or parameter. |
| 42 | +- **`process()`**: process node base on setup attributes. |
| 43 | + |
| 44 | +### AudioParam |
| 45 | + |
| 46 | +The `AudioParam` interface represents audio parameters that can be time-modulated. |
| 47 | + |
| 48 | +#### Attributes |
| 49 | + |
| 50 | +- **`value`**: The current value of the parameter. |
| 51 | + |
| 52 | +#### Methods |
| 53 | + |
| 54 | +- **`setValueAtTime(value, startTime)`**: Sets the parameter value at the specified time. |
| 55 | +- **`linearRampToValueAtTime(value, endTime)`**: Linearly ramps the value of a parameter to a specified value in a specified time. |
| 56 | +- **`exponentialRampToValueAtTime(value, endTime)`**: Exponentially changes the value of a parameter to the specified value over the specified time. |
| 57 | + |
| 58 | +### OscillatorNode |
| 59 | + |
| 60 | +The `OscillatorNode` interface represents an oscillator node that generates sounds at a specific frequency and waveform. |
| 61 | + |
| 62 | +#### Attributes |
| 63 | + |
| 64 | +- **`frequency`**: `AudioParam` - frequency parameter. |
| 65 | +- **`detune`**: `AudioParam` - detune parameter. |
| 66 | +- **`type`**: wave type (`sine`, `square`, `sawtooth`, `triangle`). |
| 67 | + |
| 68 | +### GainNode |
| 69 | + |
| 70 | +The `GainNode` interface represents a gain node that allows you to control the volume of the audio signal. |
| 71 | + |
| 72 | +#### Attributes |
| 73 | + |
| 74 | +- **`gain`**: `AudioParam` - gain parameter. |
| 75 | + |
| 76 | +### StereoPannerNode |
| 77 | + |
| 78 | +The `StereoPannerNode` interface represents a stereo panning node that allows you to control the position of sound in stereo space. |
| 79 | + |
| 80 | +#### Attributes |
| 81 | + |
| 82 | +- **`pan`**: `AudioParam` - panning parameter. |
| 83 | + |
| 84 | +## Processing Graph |
| 85 | + |
| 86 | +Processing graph - a graph, or more precisely, a chain of interconnected nodes through which the audio signal flows. Each node can be independently configured and connected to other nodes. |
| 87 | + |
| 88 | +### Example processing graph |
| 89 | + |
| 90 | +```mermaid |
| 91 | + graph TD |
| 92 | + A[Oscillator] --> B[GainNode] |
| 93 | + B --> C[PannerNode] |
| 94 | + C --> D[Destination] |
| 95 | + E[Oscillator] --> F[GainNode] |
| 96 | + F --> D |
| 97 | +``` |
| 98 | + |
| 99 | +The example graph consists of two oscillators. The first of them is equipped with GainNode and PannerNode, which allows you to control the volume and panning of the sound. Only the GainNode is connected to the second oscillator, which allows you to change its volume. Both oscillators are connected to destination, which means they will be heard at the same time |
0 commit comments