React Native Audio API

https://docs.swmansion.com/react-native-audio-api/docs
Admin
React Native Audio API provides a comprehensive set of audio functionalities for React Native...
Tokens:97,849
Snippets:835
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### WorkletSourceNode Example

Source: https://docs.swmansion.com/react-native-audio-api/docs/worklets/worklet-source-node

Complete example demonstrating creation, connection, start, and stop of a WorkletSourceNode.

```APIDOC
## WorkletSourceNode Example

### Description
Demonstrates how to create a WorkletSourceNode, connect it to the destination, start playback, and stop after a delay.

### Code Example
```javascript
import { AudioContext } from 'react-native-audio-api';

function App() {
  const audioContext = new AudioContext({ sampleRate: 44100 });

  // Create a simple sine wave generator worklet
  const sineWaveWorklet = (
    audioData: Array<Float32Array>,
    framesToProcess: number,
    currentTime: number,
    startOffset: number
  ) => {
    'worklet';

    const frequency = 440; // A4 note
    const sampleRate = 44100;

    // Generate audio for each channel
    for (let channel = 0; channel < audioData.length; channel++) {
      for (let i = 0; i < framesToProcess; i++) {
        // Calculate the absolute time for this sample
        const sampleTime = currentTime + (startOffset + i) / sampleRate;

        // Generate sine wave
        const phase = 2 * Math.PI * frequency * sampleTime;
        audioData[channel][i] = Math.sin(phase) * 0.5; // 50% volume
      }
    }
  };

  const workletSourceNode = audioContext.createWorkletSourceNode(
    sineWaveWorklet,
    'AudioRuntime'
  );

  // Connect to output and start playback
  workletSourceNode.connect(audioContext.destination);
  workletSourceNode.start(); // Start immediately

  // Stop after 2 seconds
  setTimeout(() => {
    workletSourceNode.stop();
  }, 2000);
}
```

### Notes
- The node extends `AudioScheduledSourceNode`, so it inherits `start()` and `stop()` methods.
- The worklet callback must be a worklet function (annotated with `'worklet'`).
```

--------------------------------

### Example: Using AudioBufferQueueSourceNode

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-queue-source-node

Shows how to create an AudioBufferQueueSourceNode, enqueue buffers, connect to the destination, and start playback. Requires loading audio buffers before enqueueing.

```typescript
import React, { useRef } from 'react';  
import {  
  AudioContext,  
  AudioBufferQueueSourceNode,  
} from 'react-native-audio-api';  
  
function App() {  
    const audioContextRef = useRef<AudioContext | null>(null);  
    if (!audioContextRef.current) {  
        audioContextRef.current = new AudioContext();  
    }  
    const audioBufferQueue = audioContextRef.current.createBufferQueueSource();  
    const buffer1 = ...; // Load your audio buffer here  
    const buffer2 = ...; // Load another audio buffer if needed  
    audioBufferQueue.enqueueBuffer(buffer1);  
    audioBufferQueue.enqueueBuffer(buffer2);  
    audioBufferQueue.connect(audioContextRef.current.destination);  
    audioBufferQueue.start(audioContextRef.current.currentTime);  
}  
```

--------------------------------

### start(options?)

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Starts the stream from the system audio input device. Returns a Promise that resolves when recording has started. Accepts an optional object with fileNameOverride to provide custom file name generation.

```APIDOC
## start(options?)

### Description
Starts the stream from system audio input device. Returns a `Promise` that resolves when recording has started. You can pass optional object with `fileNameOverride` string, to provide your own fileName generation.

### Method
start (asynchronous)

### Endpoint
`audioRecorder.start(options?)`

### Parameters
#### Request Body
- **options** (object) - Optional - An object with a `fileNameOverride` property.
  - **fileNameOverride** (string) - Optional - Custom file name to use for the recording.

### Request Example
```javascript
const result = await audioRecorder.start({
  fileNameOverride: `my_audio_${mySessionId}`
});

console.log(result.status);
```

### Response
#### Success Response
- **result** (object) - Contains a `status` property indicating the result of the start operation.
```

--------------------------------

### Start recording with fileNameOverride

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Starts the stream from the system audio input device. Returns a Promise that resolves when recording has started. Optionally pass fileNameOverride to provide your own file name.

```javascript
const result = await audioRecorder.start({  
  fileNameOverride: `my_audio_${mySessionId}`  
});  
  
console.log(result.status);  
```

--------------------------------

### Create and play an oscillator with AudioContext

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/oscillator-node

Creates an oscillator, sets type to 'sine', frequency to 440 Hz, detune to 0, and gain to 0.50, then connects and starts it. This is the interactive playground example.

```javascript
const ctx = new AudioContext();  
const oscillator = ctx.createOscillator();  
const gain = ctx.createGain();  
  
oscillator.type = 'sine';  
  
oscillator.frequency.value = 440;  
oscillator.detune.value = 0;  
gain.gain.value = 0.50;  
  
oscillator.connect(gain);  
gain.connect(ctx.destination);  
oscillator.start();  

```

--------------------------------

### start

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-scheduled-source-node

Schedules the node to start audio playback at a specified time. If no time is given, it starts immediately. Can only be invoked once in the node's life.

```APIDOC
## start

### Description
Schedules the node to start audio playback at specified time. If no time is given, it starts immediately. You can invoke this method only once in node's life.

### Method
start

### Parameters
#### Parameters
- **when** (number) - Required - The time, in seconds, at which the node will start to play.

### Errors
- **RangeError** - `when` is negative number.
- **InvalidStateError** - If node has already been started once.

### Returns
`undefined`.
```

--------------------------------

### start(when, offset)

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-queue-source-node

Schedules the AudioBufferQueueSourceNode to start playback of enqueued AudioBuffers, or starts to play immediately.

```APIDOC
## start(when, offset)

### Description
Schedules the AudioBufferQueueSourceNode to start playback of enqueued AudioBuffers, or starts to play immediately.

### Parameters
- **when** (number) - Optional - The time, in seconds, at which playback is scheduled to start. If when is less than AudioContext.currentTime or set to 0, the node starts playing immediately. Default: 0.
- **offset** (number) - Optional - The position, in seconds, within the first enqueued audio buffer where playback begins. The default value is 0, which starts playback from the beginning of the first enqueued buffer. If the offset exceeds the buffer's duration, it's automatically clamped to the valid range.
```

--------------------------------

### start

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-source-node

The start method schedules playback of the audio buffer, with optional timing, offset, and duration parameters.

```APIDOC
## start

### Description
Schedules the `AudioBufferSourceNode` to start playback of audio data contained in the associated `AudioBuffer`, or starts to play immediately.

### Method
start

### Parameters
- `when` (number) - Optional - The time, in seconds, at which playback is scheduled to start. If `when` is less than `AudioContext.currentTime` or set to 0, the node starts playing immediately. Default: `0`.
- `offset` (number) - Optional - The position, in seconds, within the audio buffer where playback begins. The default value is `0`, which starts playback from the beginning of the buffer. If the offset exceeds the buffer’s `duration` (or the defined `loopEnd` value), it’s automatically clamped to the valid range. Offsets are calculated using the buffer’s natural sample rate rather than the current playback rate — so even if the sound is played at double speed, halfway through a 10-second buffer is still 5 seconds.
- `duration` (number) - Optional - The playback duration, in seconds. If not provided, playback continues until the sound ends naturally or is manually stopped with `stop()` method. Equivalent to calling `start(when, offset)` followed by `stop(when + duration)`.

### Errors
- `RangeError` - `when` is negative number.
- `RangeError` - `offset` is negative number.
- `RangeError` - `duration` is negative number.
- `InvalidStateError` - If node has already been started once.

### Returns
`undefined`.
```

--------------------------------

### StreamerNode usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/streamer-node

Example of creating a StreamerNode via AudioContext.createStreamer(), initializing it with an HLS source URL, connecting to the destination, and starting playback. Note that StreamerNode can only be started once.

```typescript
import React, { useRef } from 'react';  
import {  
  AudioContext,  
  StreamerNode,  
} from 'react-native-audio-api';  
  
function App() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  const streamer = audioContextRef.current.createStreamer();  
  streamer.initialize('link/to/your/hls/source');  
  streamer.connect(audioContextRef.current.destination);  
  streamer.start(audioContextRef.current.currentTime);  
}  
```

--------------------------------

### Example usage of MediaElementAudioSourceNode with web and native implementations

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/media-element-audio-source-node

This example shows how to create a MediaElementAudioSourceNode using the AudioContext factory method createMediaElementSource. It includes both a web example using an HTMLMediaElement and a native example using the <Audio> tag and AudioTagHandle. The native example demonstrates routing through a gain node and playing the audio.

```typescript
import React, { useRef } from 'react';  
import {  
  AudioContext,  
  GainNode,  
  Audio,  
  AudioTagHandle,  
} from 'react-native-audio-api';  
  
function WebExample() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  
  const audioElement = document.querySelector('audio')!;  
  const sourceNode = audioContextRef.current.createMediaElementSource(audioElement);  
  sourceNode.connect(audioContextRef.current.destination);  
}  
  
function NativeExample() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  const audioRef = useRef<AudioTagHandle>(null);  
  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  
  const routeThroughGraph = () => {  
    if (!audioRef.current || !audioContextRef.current) {  
      return;  
    }  
  
    const mediaElementSource = audioContextRef.current.createMediaElementSource(  
      audioRef.current  
    );  
    const gain = audioContextRef.current.createGain();  
    mediaElementSource.connect(gain);  
    gain.connect(audioContextRef.current.destination);  
    audioRef.current.play();  
  };  
  
  return (  
    <Audio  
      ref={audioRef}  
      source="https://example.com/audio.mp3"  
      context={audioContextRef.current}  
      onLoad={routeThroughGraph}  
    />  
  );  
}  
```

--------------------------------

### WorkletNode example with AudioRecorder

Source: https://docs.swmansion.com/react-native-audio-api/docs/worklets/worklet-node

Example showing how to use WorkletNode to process microphone audio data in real-time. Sets audio session options, creates an AudioContext with sample rate 16000, defines a worklet callback (read-only audio data), creates a worklet node with bufferLength 1024 and 2 input channels, connects nodes, and starts recording. Note the worklet callback can only read audio data; modifications are not reflected in output.

```typescript
import { AudioContext, AudioRecorder, AudioManager } from 'react-native-audio-api';  
  
AudioManager.setAudioSessionOptions({  
    iosCategory: "playAndRecord",  
    iosMode: "measurement",  
    iosOptions: ["mixWithOthers"],  
})  
  
// This example shows how we can use a WorkletNode to process microphone audio data in real-time.  
async function App() {  
    const recorder = new AudioRecorder();  
  
    const audioContext = new AudioContext({ sampleRate: 16000 });  
    const worklet = (audioData: Array<Float32Array>, inputChannelCount: number) => {  
        'worklet';  
        // 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, 'UIRuntime');  
    const adapterNode = audioContext.createRecorderAdapter();  
  
    await AudioManager.setAudioSessionActivity(true);  
    adapterNode.connect(workletNode);  
    workletNode.connect(audioContext.destination);  
    recorder.connect(adapterNode);  
    recorder.start();  
    audioContext.resume();  
}  
```

--------------------------------

### React Native example using OscillatorNode

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/oscillator-node

Example of creating an AudioContext and OscillatorNode in a React Native component, connecting to destination and starting at current time.

```tsx
import React, { useRef } from 'react';  
import {  
  AudioContext,  
  OscillatorNode,  
} from 'react-native-audio-api';  
  
function App() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  const oscillator = audioContextRef.current.createOscillator();  
  oscillator.connect(audioContextRef.current.destination);  
  oscillator.start(audioContextRef.current.currentTime);  
}  

```

--------------------------------

### Install iOS pods before running the app

Source: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

Navigate to the ios directory and run pod install to install CocoaPods dependencies before building the iOS app.

```bash
cd ios && pod install && cd ..  
```

--------------------------------

### startRendering()

Source: https://docs.swmansion.com/react-native-audio-api/docs/core/offline-audio-context

Starts rendering the audio, taking into account the current connections and scheduled changes. Returns a Promise that resolves with the rendered AudioBuffer.

```APIDOC
## Method: startRendering()

### Description
Starts rendering the audio, taking into account the current connections and the current scheduled changes.

### Returns
- **Promise<AudioBuffer>** - Resolves with the rendered AudioBuffer.
```

--------------------------------

### ConstantSourceNode usage example with oscillators and gain nodes

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/constant-source-node

Example showing how to create a ConstantSourceNode and connect it to the gain AudioParams of two gain nodes to control both simultaneously. The constant source offset is set to 0.5 and started at the current time.

```typescript
import React, { useRef } from 'react';  
import { Text } from 'react-native';  
import {  
  AudioContext,  
  OscillatorNode,  
  GainNode,  
  ConstantSourceNode  
} from 'react-native-audio-api';  
  
function App() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  const audioContext = audioContextRef.current;  
  
  const oscillator1 = audioContext.createOscillator();  
  const oscillator2 = audioContext.createOscillator();  
  const gainNode1 = audioContext.createGain();  
  const gainNode2 = audioContext.createGain();  
  const constantSource = audioContext.createConstantSource();  
  
  oscillator1.frequency.value = 440;  
  oscillator2.frequency.value = 392;  
  constantSource.offset.value = 0.5;  
  
  oscillator1.connect(gainNode1);  
  gainNode1.connect(audioContext.destination);  
  
  oscillator2.connect(gainNode2);  
  gainNode2.connect(audioContext.destination);  
  
  // We connect the constant source to the gain nodes gain AudioParams  
  // to control both of them at the same time  
  constantSource.connect(gainNode1.gain);  
  constantSource.connect(gainNode2.gain);  
  
  oscillator1.start(audioContext.currentTime);  
  oscillator2.start(audioContext.currentTime);  
  constantSource.start(audioContext.currentTime);  
}
```

--------------------------------

### AudioBufferSourceNode usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-source-node

Creates an AudioContext, creates an AudioBufferSourceNode, assigns a buffer, connects to the destination, and starts playback. The buffer is loaded externally and assigned to the node's buffer property.

```typescript
import React, { useEffect, useRef, FC } from 'react';  
import {  
  AudioContext,  
  AudioBufferSourceNode,  
} from 'react-native-audio-api';  
  
function App() {  
  const audioContextRef = useRef<AudioContext | null>(null);  
  if (!audioContextRef.current) {  
    audioContextRef.current = new AudioContext();  
  }  
  const audioBufferSource = audioContextRef.current.createBufferSource();  
  const buffer = ...; // Load your audio buffer here  
  audioBufferSource.buffer = buffer;  
  audioBufferSource.connect(audioContextRef.current.destination);  
  audioBufferSource.start(audioContextRef.current.currentTime);  
}  

```

--------------------------------

### getLatency() usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-base-source-node

Shows how to use getLatency() to compensate for pitch correction latency when scheduling playback. Creates a buffer source with pitchCorrection enabled, connects it, and starts playback earlier by the latency value.

```javascript
const source = audioContext.createBufferSource({ pitchCorrection: true });  
source.buffer = buffer;  
source.connect(audioContext.destination);  
  
const latency = source.getLatency();  
  
// Schedule playback slightly earlier to compensate for latency  
const startTime = audioContext.currentTime + 1.0; // play in 1 second  
source.start(startTime - latency);  

```

--------------------------------

### Play audio with AudioBufferSourceNode

Source: https://docs.swmansion.com/react-native-audio-api/docs/guides/lets-make-some-noise

Completes the audio player by creating an AudioBufferSourceNode, connecting it to the AudioContext's destination, and starting playback for 10 seconds. Uses createBufferSource, connect, start, and stop methods.

```javascript
import React from 'react';  
import { View, Button } from 'react-native';  
import { AudioContext } from 'react-native-audio-api';  
  
export default function App() {  
  const handlePlay = async () => {  
    const audioContext = new AudioContext();  
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);  
  
    const playerNode = audioContext.createBufferSource();  
    playerNode.buffer = audioBuffer;  
  
    playerNode.connect(audioContext.destination);  
    playerNode.start(audioContext.currentTime);  
    playerNode.stop(audioContext.currentTime + 10);  
  };  
  
  return (  
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>  
      <Button onPress={handlePlay} title="Play sound!" />  
    </View>  
  );  
}  

```

--------------------------------

### Install react-native-audio-api with npm

Source: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

Use this command to install the package in a standard React Native project using npm.

```bash
npm install react-native-audio-api  
```

--------------------------------

### Sine wave generator worklet example

Source: https://docs.swmansion.com/react-native-audio-api/docs/worklets/worklet-source-node

Complete example of creating a WorkletSourceNode that generates a 440 Hz sine wave. It uses the 'worklet' directive, fills audioData for each channel, connects to the destination, starts immediately, and stops after 2 seconds.

```typescript
import { AudioContext } from 'react-native-audio-api';  
  
function App() {  
  const audioContext = new AudioContext({ sampleRate: 44100 });  
  
  // Create a simple sine wave generator worklet  
  const sineWaveWorklet = (  
    audioData: Array<Float32Array>,  
    framesToProcess: number,  
    currentTime: number,  
    startOffset: number  
  ) => {  
    'worklet';  
  
    const frequency = 440; // A4 note  
    const sampleRate = 44100;  
  
    // Generate audio for each channel  
    for (let channel = 0; channel < audioData.length; channel++) {  
      for (let i = 0; i < framesToProcess; i++) {  
        // Calculate the absolute time for this sample  
        const sampleTime = currentTime + (startOffset + i) / sampleRate;  
  
        // Generate sine wave  
        const phase = 2 * Math.PI * frequency * sampleTime;  
        audioData[channel][i] = Math.sin(phase) * 0.5; // 50% volume  
      }  
    }  
  };  
  
  const workletSourceNode = audioContext.createWorkletSourceNode(  
    sineWaveWorklet,  
    'AudioRuntime'  
  );  
  
  // Connect to output and start playback  
  workletSourceNode.connect(audioContext.destination);  
  workletSourceNode.start(); // Start immediately  
  
  // Stop after 2 seconds  
  setTimeout(() => {  
    workletSourceNode.stop();  
  }, 2000);  
}  
```

--------------------------------

### Install react-native-audio-api with Yarn

Source: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

Use this command to install the package in a standard React Native project using Yarn.

```bash
yarn add react-native-audio-api  
```

--------------------------------

### Create and play an AudioBufferSourceNode

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-source-node

Creates an AudioBufferSourceNode with pitch correction disabled, sets its buffer, playback rate, detune, loop properties, connects to the destination, and starts playback. The node can only be started once; create a new node to play again, reusing the same AudioBuffer.

```javascript
import { AudioContext } from 'react-native-audio-api';  
  
const ctx = new AudioContext();  
const source = await ctx.createBufferSource({ pitchCorrection: false });  
source.buffer = audioBuffer;  
source.playbackRate.value = 1.00;  
source.detune.value = 0;  
source.loop = false;  
source.loopStart = 0.00;  
source.loopEnd = 5.00;  
source.connect(ctx.destination);  
source.start();  
```

--------------------------------

### Install react-native-audio-api with Expo

Source: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

Use this command to install the package in an Expo managed project. It ensures the version is compatible with your Expo SDK.

```bash
npx expo install react-native-audio-api  
```

--------------------------------

### Connecting node to node

Source: https://docs.swmansion.com/react-native-audio-api/docs/core/audio-node

Creates an AudioContext, an OscillatorNode, and a GainNode. Sets the gain to 0.5, connects the oscillator to the gain, the gain to the destination, and starts the oscillator.

```javascript
import { OscillatorNode, GainNode, AudioContext } from 'react-native-audio-api';  
  
function App() {  
  const audioContext = new AudioContext();  
  const oscillatorNode = audioContext.createOscillator();  
  const gainNode = audioContext.createGain();  
  
  gainNode.gain.value = 0.5; //lower volume to 0.5  
  oscillatorNode.connect(gainNode);  
  gainNode.connect(audioContext.destination);  
  oscillatorNode.start(audioContext.currentTime);  
}  

```

--------------------------------

### Test system-wide bash on Windows

Source: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

Run this command to verify that a Unix-like bash is available on Windows, which is required for the package installation.

```bash
bash -c 'echo Hello World!'  
```

--------------------------------

### High Quality preset example

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Enables file output with the High Quality preset, using high-fidelity audio parameters with efficient encoding for near-lossless quality.

```typescript
audioRecorder.enableFileOutput({  
  format: FileFormat.Flac,  
  preset: FilePreset.High,  
});  
```

--------------------------------

### Low Quality preset example

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Enables file output with the Low Quality preset, minimizing file size and processing overhead for speech intelligibility.

```typescript
audioRecorder.enableFileOutput({  
  format: FileFormat.M4A,  
  preset: FilePreset.Low,  
});  
```

--------------------------------

### useSystemVolume usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/react/system-volume

Example of using the useSystemVolume hook in a React component to display the current volume as a percentage. The hook returns a number from 0 to 1, rounded to two decimal places, and starts at 0 until the first volume change.

```javascript
import React from 'react';
import { Text } from 'react-native';
import { useSystemVolume } from 'react-native-audio-api';

function VolumeLabel() {
  const volume = useSystemVolume();

  return <Text>Volume: {Math.round(volume * 100)}%</Text>;
}
```

--------------------------------

### Usage example for `<Audio>` component

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-tag

Shows a basic player component using the `<Audio>` component with a remote source, controls, and event handlers. The `ref` is typed as `AudioTagHandle`. The `onLoad` callback logs 'ready', `onError` logs the error, and `onPositionChange` receives the current playback position in seconds.

```tsx
import React, { useRef } from 'react';  
import { View } from 'react-native';  
import { Audio, AudioTagHandle } from 'react-native-audio-api';  
  
const DEMO_URL = 'https://example.com/audio.mp3';  
  
export function Player() {  
  const ref = useRef<AudioTagHandle>(null);  
  
  return (  
    <View style={{ flex: 1 }}>  
      <Audio  
        ref={ref}  
        source={DEMO_URL}  
        controls  
        onLoad={() => console.log('ready')}  
        onError={(e) => console.error(e)}  
        onPositionChange={(seconds) => {}}  
      />  
    </View>  
  );  
}  

```

--------------------------------

### Example usage of custom processor node

Source: https://docs.swmansion.com/react-native-audio-api/docs/guides/create-your-own-effect

Shows how to use the custom processor node in a React component. It creates an AudioContext, an oscillator, and a MyProcessorNode using the global function, then connects them and starts the oscillator.

```typescript
import {  
  AudioContext,  
  OscillatorNode,  
} from 'react-native-audio-api';  
import { MyProcessorNode } from './types';  
  
function App() {  
  const audioContext = new AudioContext();  
  const oscillator = audioContext.createOscillator();  
  // constructor is put in global scope  
  const processor = new MyProcessorNode(audioContext, global.createCustomProcessorNode(audioContext.context));  
  oscillator.connect(processor);  
  processor.connect(audioContext.destination);  
  oscillator.start(audioContext.currentTime);  
}  

```

--------------------------------

### constructor(context: BaseAudioContext, options?: AnalyserOptions)

Source: https://docs.swmansion.com/react-native-audio-api/docs/analysis/analyser-node

Creates a new AnalyserNode instance with the given audio context and optional configuration options. The options allow setting initial values for fftSize, minDecibels, maxDecibels, and smoothingTimeConstant.

```APIDOC
## constructor(context: BaseAudioContext, options?: AnalyserOptions)

### Description
Creates a new AnalyserNode instance. The node passes audio data unchanged from input to output but allows extraction of time-domain and frequency-domain data.

### Method
constructor

### Parameters
#### context
- **type**: BaseAudioContext - Required - The audio context to which the node belongs.

#### options (optional)
- **fftSize** (number) - Optional - Initial value for fftSize. Default: 2048.
- **minDecibels** (number) - Optional - Initial value for minDecibels. Default: -100.0.
- **maxDecibels** (number) - Optional - Initial value for maxDecibels. Default: -30.0.
- **smoothingTimeConstant** (number) - Optional - Initial value for smoothingTimeConstant. Default: 0.8.

### Notes
Inherits all properties from AudioNodeOptions.

You can also create an AnalyserNode via the BaseAudioContext.createAnalyser() factory method, which uses default values.
```

--------------------------------

### Record audio with AudioRecorder and AudioContext

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Sets up audio session options, requests recording permissions, activates the audio session, creates a recorder adapter, connects it to the audio context destination, and starts/stops recording. Handles permission denial, session activation errors, and recording start errors. The UI toggles between Record and Stop states.

```typescript
import React, { useState } from 'react';  
import { View, Pressable, Text } from 'react-native';  
import { AudioRecorder, AudioContext, AudioManager } from 'react-native-audio-api';  
  
AudioManager.setAudioSessionOptions({  
  iosCategory: 'playAndRecord',  
  iosMode: 'default',  
  iosOptions: [],  
});  
  
const audioRecorder = new AudioRecorder();  
const audioContext = new AudioContext();  
  
const MyRecorder: React.FC = () => {  
  const [isRecording, setIsRecording] = useState(false);  
  
  const onStart = async () => {  
    if (isRecording) {  
      return;  
    }  
  
    // Make sure the permissions are granted  
    const permissions = await AudioManager.requestRecordingPermissions();  
  
    if (permissions !== 'Granted') {  
      console.warn('Permissions are not granted');  
      return;  
    }  
  
    // Activate audio session  
    try {  
      await AudioManager.setAudioSessionActivity(true);  
    } catch (error) {  
      console.warn('Could not activate the audio session', error);  
      return;  
    }  
  
    const adapter = audioContext.createRecorderAdapter();  
    adapter.connect(audioContext.destination);  
    audioRecorder.connect(adapter);  
  
    if (audioContext.state === 'suspended') {  
      await audioContext.resume();  
    }  
  
    const result = await audioRecorder.start();  
  
    if (result.status === 'error') {  
      console.warn(result.message);  
      return;  
    }  
  
    setIsRecording(true);  
  };  
  
  const onStop = async () => {  
    if (!isRecording) {  
      return;  
    }  
  
    await audioRecorder.stop();  
    audioContext.suspend();  
    setIsRecording(false);  
    await AudioManager.setAudioSessionActivity(false);  
  };  
  
  return (  
    <View>  
      <Pressable onPress={isRecording ? onStop : onStart}>  
        <Text>{isRecording ? 'Stop' : 'Record'}</Text>  
      </Pressable>  
    </View>  
  );  
};  
  
export default MyRecorder;  
```

--------------------------------

### new AudioContext(options: AudioContextOptions)

Source: https://docs.swmansion.com/react-native-audio-api/docs/core/audio-context

Creates a new AudioContext instance with the provided options. The sampleRate must be within the nominal range [8000, 96000], otherwise a NotSupportedError is thrown.

```APIDOC
## new AudioContext(options: AudioContextOptions)

### Description
Creates a new AudioContext instance with the provided options. The sampleRate must be within the nominal range [8000, 96000], otherwise a NotSupportedError is thrown.

### Constructor
`new AudioContext(options: AudioContextOptions)`

### Parameters
#### Options
- **sampleRate** (number) - Required - The sample rate for the audio context.

### Errors
- **NotSupportedError** - Thrown when `sampleRate` is outside the nominal range [8000, 96000].

### Example
```typescript
const audioContext = new AudioContext({ sampleRate: 44100 });
```
```

--------------------------------

### AudioManager usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/system/audio-manager

Shows how to configure AVAudioSession options on iOS, enable interruption observation, fetch device info, and subscribe to interruption events. Note that not all iosOptions are compatible with every iosCategory; invalid combinations can cause SessionActivationError and total audio silence.

```javascript
import { AudioManager } from 'react-native-audio-api';  
import { useEffect } from 'react';  
  
function App() {  
    // set AVAudioSession example options (iOS)  
    AudioManager.setAudioSessionOptions({  
      iosCategory: 'playback',  
      iosMode: 'default',  
      iosOptions: ['allowBluetoothHFP', 'allowAirPlay'],  
    })  
    // enabling emission of events  
    AudioManager.observeAudioInterruptions(true);  
    AudioManager.getDevicesInfo().then(console.log);  
  
  useEffect(() => {  
    // callback to be invoked on 'interruption' event  
    const interruptionSubscription = AudioManager.addSystemEventListener(  
      'interruption',  
      (event) => {  
        console.log('Interruption event:', event);  
      }  
    );  
  
    return () => {  
      interruptionSubscription?.remove();  
    };  
  }, []);  
}  

```

--------------------------------

### constructor(context: BaseAudioContext, options?: GainOptions)

Source: https://docs.swmansion.com/react-native-audio-api/docs/effects/gain-node

Creates a new GainNode instance with the given audio context and optional options. The options can specify the initial gain value.

```APIDOC
## constructor(context: BaseAudioContext, options?: GainOptions)

### Description
Creates a new GainNode instance. The options parameter can include a `gain` property to set the initial gain value.

### Parameters
- `context` (BaseAudioContext) - Required - The audio context to associate with the node.
- `options` (GainOptions) - Optional - An object that can include a `gain` property (number, default `1.0`) for the initial gain value.

### GainOptions
Inherits all properties from `AudioNodeOptions`.

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `gain` | number | `1.0` | Initial value for `gain` |

### Remarks
You can also create a `GainNode` via the `BaseAudioContext.createGain()` factory method, which uses default values.
```

--------------------------------

### WorkletNode Example

Source: https://docs.swmansion.com/react-native-audio-api/docs/worklets/worklet-node

Example usage of WorkletNode to process microphone audio data in real-time.

```APIDOC
## WorkletNode Example

### Description
Demonstrates how to use a WorkletNode to process microphone audio data in real-time.

### Code
```js
import { AudioContext, AudioRecorder, AudioManager } from 'react-native-audio-api';

AudioManager.setAudioSessionOptions({
    iosCategory: "playAndRecord",
    iosMode: "measurement",
    iosOptions: ["mixWithOthers"],
})

async function App() {
    const recorder = new AudioRecorder();
    const audioContext = new AudioContext({ sampleRate: 16000 });
    const worklet = (audioData: Array<Float32Array>, inputChannelCount: number) => {
        'worklet';
        // 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, 'UIRuntime');
    const adapterNode = audioContext.createRecorderAdapter();

    await AudioManager.setAudioSessionActivity(true);
    adapterNode.connect(workletNode);
    workletNode.connect(audioContext.destination);
    recorder.connect(adapterNode);
    recorder.start();
    audioContext.resume();
}
```
```

--------------------------------

### constructor(options: AudioBufferOptions)

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer

Creates a new AudioBuffer instance with the specified length, number of channels, and sample rate.

```APIDOC
## constructor(options: AudioBufferOptions)

### Description
Creates a new AudioBuffer instance with the specified length, number of channels, and sample rate.

### Parameters
#### AudioBufferOptions
- **length** (number) - Required - Length of the buffer.
- **numberOfChannels** (number) - Optional - Number of channels in buffer. Default: 1.0.
- **sampleRate** (number) - Required - Sample rate of the buffer in Hz.

### Notes
Alternatively, can be created using `BaseAudioContext.createBuffer(numChannels, length, sampleRate)` factory method.
```

--------------------------------

### Record to File with AudioRecorder

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Sets up an AudioRecorder with file output enabled, requests recording permissions, activates the audio session, and starts/stops recording. The recording is saved to a file with default configuration.

```TypeScript
import React, { useState } from 'react';  
import { View, Pressable, Text } from 'react-native';  
import { AudioRecorder, AudioManager } from 'react-native-audio-api';  
  
AudioManager.setAudioSessionOptions({  
  iosCategory: 'record',  
  iosMode: 'default',  
  iosOptions: [],  
});  
  
const audioRecorder = new AudioRecorder();  
  
// Enables recording to file with default configuration  
audioRecorder.enableFileOutput();  
  
const MyRecorder: React.FC = () => {  
  const [isRecording, setIsRecording] = useState(false);  
  
  const onStart = async () => {  
    if (isRecording) {  
      return;  
    }  
  
    // Make sure the permissions are granted  
    const permissions = await AudioManager.requestRecordingPermissions();  
  
    if (permissions !== 'Granted') {  
      console.warn('Permissions are not granted');  
      return;  
    }  
  
    // Activate audio session  
    try {  
      await AudioManager.setAudioSessionActivity(true);  
    } catch (error) {  
      console.warn('Could not activate the audio session', error);  
      return;  
    }  
  
    const result = await audioRecorder.start();  
    if (result.status === 'error') {  
      console.warn(result.message);  
      return;  
    }  
  
    console.log('Recording started');  
    setIsRecording(true);  
  };  
  
  const onStop = async () => {  
    if (!isRecording) {  
      return;  
    }  
  
    const result = await audioRecorder.stop();  
    console.log(result);  
    setIsRecording(false);  
    await AudioManager.setAudioSessionActivity(false);  
  };  
  
  return (  
    <View>  
      <Pressable onPress={isRecording ? onStop : onStart}>  
        <Text>{isRecording ? 'Stop' : 'Record'}</Text>  
      </Pressable>  
    </View>  
  );  
};  
  
export default MyRecorder;  

```

--------------------------------

### Test audio recording workflow

Source: https://docs.swmansion.com/react-native-audio-api/docs/other/testing

Unit test for configuring file output, setting up a recording chain, and starting/stopping recording.

```javascript
import { AudioContext, AudioRecorder, FileFormat, FileDirectory } from 'react-native-audio-api/mock';  
  
describe('Audio Recording Tests', () => {  
  it('should configure and control recording', async () => {  
    const context = new AudioContext();  
    const recorder = new AudioRecorder();  
  
    // Configure file output  
    const result = recorder.enableFileOutput({  
      format: FileFormat.M4A,  
      channelCount: 2,  
      directory: FileDirectory.Document,  
    });  
  
    expect(result.status).toBe('success');  
  
    // Set up recording chain  
    const oscillator = context.createOscillator();  
    const recorderAdapter = context.createRecorderAdapter();  
  
    oscillator.connect(recorderAdapter);  
    recorder.connect(recorderAdapter);  
  
    // Test recording workflow  
    const startResult = await recorder.start();  
    expect(startResult.status).toBe('success');  
    expect(recorder.isRecording()).toBe(true);  
  
    const stopResult = await recorder.stop();  
    expect(stopResult.status).toBe('success');  
    expect(recorder.isRecording()).toBe(false);  
  });  
});  
```

--------------------------------

### Install react-native-worklets

Source: https://docs.swmansion.com/react-native-audio-api/docs/worklets/worklets-introduction

Install the react-native-worklets library to use worklet features in react-native-audio-api. Supported versions are 0.7.0 and higher; nightly versions are always supported but may cause build failures. If not installed, runtime errors occur when using worklet-dependent features.

```bash
npm install react-native-worklets  
```

--------------------------------

### useAudioInput usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/react/select-input

Example of using the useAudioInput hook to display the current input and a list of available inputs with buttons to select them. The hook is imported from 'react-native-audio-api' and returns availableInputs, currentInput, and onSelectInput.

```javascript
import React from 'react';  
import { View, Text, Button } from 'react-native';  
import { useAudioInput } from 'react-native-audio-api';  
  
function AudioInputSelector() {  
  const { availableInputs, currentInput, onSelectInput } = useAudioInput();  
  
  return (  
    <View>  
      <Text>Current Input: {currentInput?.name || 'None'}</Text>  
  
      {availableInputs.map((input) => (  
        <Button  
          key={input.id}  
          title={`${input.name} (${input.category})`}  
          onPress={() => onSelectInput(input)}  
        />  
      ))}  
    </View>  
  );  
}  

```

--------------------------------

### decodePCMInBase64 example

Source: https://docs.swmansion.com/react-native-audio-api/docs/core/base-audio-context

Decodes base64-encoded PCM data with explicit sample rate, channel count, and interleaving flag. The example uses non-interleaved data with a sample rate of 4800 and 2 channels.

```javascript
const data = ... // data encoded in base64 string  
// data is not interleaved (Channel1, Channel1, ..., Channel2, Channel2, ...)  
const buffer = await this.audioContext.decodeAudioData(data, 4800, 2, false);  

```

--------------------------------

### RecorderAdapterNode usage example

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/recorder-adapter-node

Creates an AudioRecorder and an AudioContext, then creates a RecorderAdapterNode via createRecorderAdapter(), connects the recorder to the adapter, and the adapter to the destination. The adapter will produce silence if no recorder is connected.

```javascript
const recorder = new AudioRecorder({  
    sampleRate: 48000,  
    bufferLengthInSamples: 48000,  
});  
const audioContext = new AudioContext({ sampleRate: 48000 });  
const recorderAdapterNode = aCtxRef.current.createRecorderAdapter();  
  
recorder.connect(recorderAdapterNode);  
recorderAdapterNode.connect(audioContext.destination)  
```

--------------------------------

### Enable file output with built-in preset

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Shows how to enable file output using a predefined preset (e.g., FilePreset.High) with a specified format.

```typescript
import { AudioRecorder, FileFormat, FilePreset } from 'react-native-audio-api';  
  
const audioRecorder = new AudioRecorder();  
  
audioRecorder.enableFileOutput({  
  format: FileFormat.M4A,  
  preset: FilePreset.High,  
});  
```

--------------------------------

### AudioTagHandle.play

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-tag

Starts or resumes playback of the audio tag.

```APIDOC
## play

### Description
Start or resume playback.

### Method
play

### Parameters
None

### Returns
void
```

--------------------------------

### getChannelData(channel)

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer

Gets a modifiable array with PCM data from the specified channel.

```APIDOC
## getChannelData(channel)

### Description
Gets a modifiable array with PCM data from the given channel.

### Parameters
- **channel** (number) - Required - Index of the AudioBuffer's channel from which data will be returned.

### Errors
- **IndexSizeError** - `channel` specifies unexisting audio channel.

### Returns
`Float32Array`
```

--------------------------------

### createBufferSource(options: AudioBufferBaseSourceNodeOptions)

Source: https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-source-node

Creates an AudioBufferSourceNode with the specified options, allowing playback of in-memory audio data.

```APIDOC
## createBufferSource(options: AudioBufferBaseSourceNodeOptions)

### Description
Creates an AudioBufferSourceNode, which represents an audio source with in-memory audio data stored in an AudioBuffer. This method is used to create a node for audio playback, including pause and resume functionalities.

### Method
createBufferSource

### Parameters
#### Options
- **pitchCorrection** (boolean) - Required - Specifies if pitch correction algorithm has to be available.

### Request Example
```typescript
const source = await ctx.createBufferSource({ pitchCorrection: false });
```

### Response
#### Success Response
Returns an AudioBufferSourceNode instance.

#### Response Example
```typescript
const source = await ctx.createBufferSource({ pitchCorrection: false });
source.buffer = audioBuffer;
source.playbackRate.value = 1.00;
source.detune.value = 0;
source.loop = false;
source.loopStart = 0.00;
source.loopEnd = 5.00;
source.connect(ctx.destination);
source.start();
```
```

--------------------------------

### createWorkletProcessingNode

Source: https://docs.swmansion.com/react-native-audio-api/docs/core/base-audio-context

Creates a WorkletProcessingNode with a specified worklet function and runtime. Throws an error if react-native-worklet is not installed.

```APIDOC
## createWorkletProcessingNode

### Description
Creates a `WorkletProcessingNode` with the given worklet and runtime.

### Method
createWorkletProcessingNode

### Parameters
- **worklet** (`(Array<Float32Array>, Array<Float32Array>, number, number) => void`) - Required - The worklet to be executed.
- **workletRuntime** (`AudioWorkletRuntime`) - Required - The kind of runtime to use for the worklet.

### Returns
`WorkletProcessingNode`

### Errors
- `Error` - `react-native-worklet` is not found as dependency.
```

--------------------------------

### Get current recording duration

Source: https://docs.swmansion.com/react-native-audio-api/docs/inputs/audio-recorder

Returns current recording duration if recording to file is enabled.

```javascript
  const duration = audioRecorder.getCurrentDuration();  
```

--------------------------------

### Set up Jest mock for react-native-audio-api

Source: https://docs.swmansion.com/react-native-audio-api/docs/other/testing

Configure Jest to use the mock implementation in your test setup file.

```javascript
// In your test setup file  
jest.mock('react-native-audio-api', () =>  
  require('react-native-audio-api/mock')  
);  
  
// Then in your tests  
import { AudioContext, AudioRecorder } from 'react-native-audio-api';  
```

--------------------------------

### PlayingNote interface

Source: https://docs.swmansion.com/react-native-audio-api/docs/guides/making-a-piano-keyboard

Defines the structure for a playing note, storing the source node, envelope gain node, and the start time.

```typescript
interface PlayingNote {  
  source: AudioBufferSourceNode;  
  envelope: GainNode;  
  startedAt: number;  
}  

```
Tokens:
Raw