Skip to main content

​
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 instanceParameters:
  • 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

PlatformSupported
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

Build docs developers (and LLMs) love

Get started for freeTalk to us