expo-audio

A cross-platform audio library for playing and recording audio in React Native and Expo apps

expo-audio

Version: 55.0.6

A cross-platform audio library for React Native and Expo apps. Provides playback and recording capabilities with support for various audio formats.

Installation

npx expo install expo-audio

Usage

import { AudioPlayer } from 'expo-audio';
import { useState } from 'react';
import { Button, View } from 'react-native';

function App() {
  const [player, setPlayer] = useState<AudioPlayer | null>(null);

  async function playSound() {
    const audioPlayer = new AudioPlayer(require('./assets/sound.mp3'));
    setPlayer(audioPlayer);
    await audioPlayer.play();
  }

  return (
    <View>
      <Button title="Play Sound" onPress={playSound} />
    </View>
  );
}

API Reference

AudioPlayer

The main class for playing audio files.

new AudioPlayer(source) · constructor

Creates a new audio player instance

Parameters:

• source: Audio source (require() or URI string)

const player = new AudioPlayer(require('./audio.mp3'));
// or
const player = new AudioPlayer('https://example.com/audio.mp3');

player.play() · () => Promise<void>

Starts or resumes playback

await player.play();

player.pause() · () => Promise<void>

Pauses playback

await player.pause();

player.stop() · () => Promise<void>

Stops playback and resets position

await player.stop();

player.seekTo(position) · (position: number) => Promise<void>

Seeks to specified position in milliseconds

await player.seekTo(30000); // Seek to 30 seconds

player.setVolume(volume) · (volume: number) => Promise<void>

Sets playback volume (0.0 to 1.0)

await player.setVolume(0.5); // 50% volume

player.release() · () => Promise<void>

Releases resources associated with the player

await player.release();

AudioRecorder

new AudioRecorder(options) · constructor

Creates a new audio recorder instance

import { AudioRecorder } from 'expo-audio';

const recorder = new AudioRecorder({
  sampleRate: 44100,
  numberOfChannels: 2,
  bitRate: 128000,
});

recorder.record() · () => Promise<void>

Starts recording audio

await recorder.record();

recorder.stop() · () => Promise<string>

Stops recording and returns the URI of the recorded file

const uri = await recorder.stop();
console.log('Recorded audio:', uri);

Permissions

requestRecordingPermissionsAsync() · () => Promise<PermissionResponse>

Asks the user to grant permissions for audio recording

import { requestRecordingPermissionsAsync } from 'expo-audio';

const { status } = await requestRecordingPermissionsAsync();
if (status === 'granted') {
  // Permission granted
}

getRecordingPermissionsAsync() · () => Promise<PermissionResponse>

Checks the current recording permission status

Examples

Audio Player with Controls

import { AudioPlayer } from 'expo-audio';
import { useState, useEffect } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';

function AudioPlayerExample() {
  const [player, setPlayer] = useState<AudioPlayer | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    return () => {
      player?.release();
    };
  }, [player]);

  async function loadAndPlay() {
    const audioPlayer = new AudioPlayer(
      'https://example.com/audio.mp3'
    );
    setPlayer(audioPlayer);
    await audioPlayer.play();
    setIsPlaying(true);
  }

  async function togglePlayback() {
    if (!player) return;
    
    if (isPlaying) {
      await player.pause();
      setIsPlaying(false);
    } else {
      await player.play();
      setIsPlaying(true);
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Load Audio" onPress={loadAndPlay} />
      {player && (
        <Button
          title={isPlaying ? 'Pause' : 'Play'}
          onPress={togglePlayback}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, gap: 10 },
});

Audio Recorder

import { AudioRecorder, requestRecordingPermissionsAsync } from 'expo-audio';
import { useState } from 'react';
import { View, Button } from 'react-native';

function RecorderExample() {
  const [recorder] = useState(() => new AudioRecorder());
  const [recording, setRecording] = useState(false);

  async function startRecording() {
    const { status } = await requestRecordingPermissionsAsync();
    if (status !== 'granted') {
      alert('Permission required');
      return;
    }

    await recorder.record();
    setRecording(true);
  }

  async function stopRecording() {
    const uri = await recorder.stop();
    setRecording(false);
    console.log('Recording saved to:', uri);
  }

  return (
    <View>
      <Button
        title={recording ? 'Stop Recording' : 'Start Recording'}
        onPress={recording ? stopRecording : startRecording}
      />
    </View>
  );
}

Platform Support

Platform	Supported
iOS	✅
Android	✅
Web	✅

Permissions

iOS

Add to app.json:

{
  "expo": {
    "plugins": [
      [
        "expo-audio",
        {
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
        }
      ]
    ]
  }
}

Android

Permissions are automatically added to AndroidManifest.xml:

• RECORD_AUDIO - for recording audio

Resources

• Official Documentation
• GitHub Repository