Working with Media and Audio (expo-av)

1. Loading Audio Files

Property	Description	Values
uri	URI of the audio file to load	`string`
shouldPlay	Whether to start playing the audio immediately after loading	`boolean`
volume	Volume level of the audio (0.0 to 1.0)	`number`
rate	Playback rate of the audio (1.0 is normal speed)	`number`
shouldRepeat	Whether to loop the audio file	`boolean`

Example: Loading an Audio File

import { Audio } from 'expo-av';

const loadAudio = async () => {
  const { sound } = await Audio.Sound.createAsync(
    { uri: 'https://example.com/audio.mp3' },
    { shouldPlay: true }
  );

  return sound;
};

Note: The uri can be a local file path or a remote URL.

Warning: Make sure to call sound.unloadAsync() when done to free up resources.

2. Playing Audio

Property	Value	Description
uri	`string`	URI of the audio file to play (local or remote)
shouldPlay	`boolean`	Whether to start playing immediately
positionMillis	`number`	Start position in milliseconds
rate	`number`	Playback rate (1.0 = normal speed)
shouldRepeat	`boolean`	Whether to loop the audio
volume	`number`	Volume level (0.0 to 1.0)

Example: Basic Audio Playback

import { Audio } from 'expo-av';

const playAudio = async () => {
  const { sound } = await Audio.Sound.createAsync(
    { uri: 'https://example.com/audio.mp3' },
    { shouldPlay: true }
  );

  // Store sound reference to stop later
  this.sound = sound;
};

playAudio();

Example: Controlling Playback

import { Audio } from 'expo-av';

const handlePlay = async () => {
  if (this.sound) {
    await this.sound.playAsync();
  }
};

const handlePause = async () => {
  if (this.sound) {
    await this.sound.pauseAsync();
  }
};

const handleStop = async () => {
  if (this.sound) {
    await this.sound.stopAsync();
    await this.sound.unloadAsync();
  }
};

Note: On Android, audio playback requires the RECORD_AUDIO permission.

Warning: Always call unloadAsync() when done to free up resources.

3. Pausing Audio

Property	Description	Values
soundObject	Instance of Audio.Sound	`Audio.Sound`
status	Current playback status	`soundObject.status`

Example: Pausing Audio

import { Audio } from 'expo-av';

const soundObject = new Audio.Sound();

async function loadAndPlaySound() {
  await soundObject.loadAsync({ uri: 'https://example.com/audio.mp3' });
  await soundObject.playAsync();

  // Pause the sound
  await soundObject.pauseAsync();
}

loadAndPlaySound();

Note: The pauseAsync() method pauses the sound and sets its status to isPlaying: false.

4. Stopping Audio

Method	Description	Notes
stopAsync()	Stops the audio playback and releases the resources.	Must be called on a sound object that is currently playing.

Example: Stopping Audio

import { Audio } from 'expo-av';

const soundObject = new Audio.Sound();

// Assume sound is playing...
await soundObject.stopAsync();

5. Setting Playback Position

Property	Description	Values
positionMillis	Current playback position in milliseconds	`number`
durationMillis	Total duration of the audio file in milliseconds	`number`

Example: Setting Playback Position

import { Audio } from 'expo-av';

const soundObject = new Audio.Sound();

await soundObject.loadAsync({ uri: 'https://example.com/audio.mp3' });
await soundObject.playAsync();

// Set playback position to 30 seconds (30000 milliseconds)
await soundObject.setPositionAsync(30000);

Note: The setPositionAsync method is supported on both iOS and Android platforms.

Warning: Setting the position to a value greater than the total duration will result in an error.

6. Setting Volume

Property	Values	Description
volume	`0.0` to `1.0`	Volume level of the audio, where `0.0` is silent and `1.0` is maximum volume
rate	`0.0` to `2.0`	Playback rate of the audio, where `1.0` is normal speed
shouldPlay	`true` / `false`	Determines whether the audio should play or pause

Example: Setting Volume

import { Audio } from 'expo-av';

const soundObject = new Audio.Sound();

await soundObject.loadAsync({ uri: 'https://example.com/audio.mp3' });
await soundObject.setVolumeAsync(0.5); // Set volume to 50%

Note: Volume is set per sound instance and does not affect other sounds or system volume.

7. Configuring Audio Mode

Property	Description	Values	Notes
mode	Audio mode to configure	`'ambient'`, `'playback'`, `'record'`, `'mixWithOthers'`	Controls how audio is handled by the system
shouldDuck	Whether to lower volume of other audio sources	`true`, `false`	Applies to `'playback'` and `'record'` modes
shouldMixWithOthers	Whether to mix audio with other apps	`true`, `false`	Applies to `'playback'` mode

Example: Setting Audio Mode

import { Audio } from 'expo-av';

Audio.setAudioModeAsync({
  mode: 'playback',
  shouldDuck: true,
  shouldMixWithOthers: false
});

Note: The mode property affects how audio is routed and managed by the system. For example, 'ambient' allows other apps to play audio simultaneously, while 'playback' takes exclusive control of audio output.

8. Recording Audio

Property	Description	Values
recorder	Recorder instance	`Audio.Recorder`
audioMode	Audio mode configuration	`Audio.Mode`
audioRecorderOptions	Recorder options object	`Object`

Example: Start Recording Audio

import * as Audio from 'expo-av';

const { status } = await Audio.Recording.createAsync(
  Audio.RecordingOptions
);

if (status === 'finished') {
  console.log('Recording finished');
}

Example: Stop Recording Audio

import * as Audio from 'expo-av';

await Audio.Recording.stopAndPersistAsync();
console.log('Recording stopped and saved');

Note: Ensure you have appropriate permissions before starting audio recording.

Warning: Recording may not work in all environments or devices.

Option	Values	Description
audioMode	`Audio.Mode`	Configures audio input/output mode
quality	`'low'`, `'medium'`, `'high'`	Audio quality setting
maxDuration	`number`	Maximum recording duration in seconds

Recording Audio Summary

Use Audio.Recording.createAsync() to start recording
Call stopAndPersistAsync() to stop and save the recording
Configure audioMode for input/output behavior
Set quality to control audio fidelity

9. Playing Video

Property	Description	Values
source	Video source URI or file path	`string`
shouldPlay	Whether to start playing automatically	`boolean`
isLooping	Whether to loop the video	`boolean`
volume	Volume level (0.0 to 1.0)	`number`
rate	Playback rate (1.0 = normal speed)	`number`

Example: Playing a Video

import { Video } from 'expo-av';

const videoSource = require('./assets/video.mp4');

<Video
  source={videoSource}
  shouldPlay={true}
  isLooping={true}
  volume={1.0}
  rate={1.0}
  style={{ width: '100%', height: 300 }}
/>

Note: Ensure the video file is included in your app bundle or accessible via a URL.

Warning: On some platforms, video playback may require additional permissions or configuration.

10. Controlling Video Playback

Property	Description	Values
status	Current playback status	`idle`, `loading`, `ready`, `playing`, `paused`, `error`
positionMillis	Current playback position in milliseconds	`number`
durationMillis	Total duration of the video in milliseconds	`number`
rate	Playback rate (1.0 = normal speed)	`number`
shouldPlay	Whether the video should play or pause	`true`, `false`
volume	Volume level (0.0 to 1.0)	`number`
isMuted	Whether the audio is muted	`true`, `false`
progressUpdateIntervalMillis	How often to update progress (in milliseconds)	`number`

Example: Controlling Video Playback

import { Video } from 'expo-av';

const video = useRef(null);

const playVideo = () => {
  video.current.setStatusAsync({ shouldPlay: true });
};

const pauseVideo = () => {
  video.current.setStatusAsync({ shouldPlay: false });
};

const seekTo = (millis) => {
  video.current.setStatusAsync({ positionMillis: millis });
};

const setPlaybackRate = (rate) => {
  video.current.setStatusAsync({ rate });
};

const setVolume = (volume) => {
  video.current.setStatusAsync({ volume });
};

const muteAudio = () => {
  video.current.setStatusAsync({ isMuted: true });
};

Note: The status property is read-only and reflects the current state of the video player.

Warning: Setting positionMillis while the video is playing may cause unexpected behavior or stuttering.

11. Handling Playback Status

Property	Description	Values
isLoaded	Indicates if the audio or video is loaded and ready to play	`true` / `false`
uri	URI of the currently playing media	`string`
progress	Current playback progress in seconds	`number`
duration	Total duration of the media in seconds	`number`
isPlaying	Indicates if the media is currently playing	`true` / `false`
isBuffering	Indicates if the media is currently buffering	`true` / `false`
rate	Playback rate (1.0 = normal speed)	`number`
shouldPlay	Indicates if the media should be playing	`true` / `false`
volume	Volume level (0.0 to 1.0)	`number`
position	Current position in milliseconds	`number`
playableDuration	Playable duration in milliseconds	`number`

Example: Handling Playback Status

import { Audio } from 'expo-av';

const handlePlaybackStatusUpdate = (status) => {
  console.log('Playback Status:', status);
  if (status.isLoaded) {
    console.log('Duration:', status.duration, 'seconds');
    console.log('Position:', status.position, 'milliseconds');
  }
};

const loadAudio = async () => {
  const { sound } = await Audio.Sound.createAsync(
    { uri: 'https://example.com/audio.mp3' },
    {},
    handlePlaybackStatusUpdate
  );
};

Note: The handlePlaybackStatusUpdate callback is called whenever the playback status changes, allowing you to update UI elements or trigger other actions based on the current state of the media.

12. Looping Playback

Property	Values	Description
shouldLoop	`true` \| `false`	Whether the audio/video should loop when it reaches the end.
rate	`1.0` (normal) \| `< 1.0` (slower) \| `> 1.0` (faster)	Playback rate of the media. Values outside 0.25-4.0 may cause issues.
volume	`0.0` to `1.0`	Volume level of the media (0.0 = silent, 1.0 = full volume).

Example: Looping Audio Playback

import { Audio } from 'expo-av';

const playAudio = async () => {
  const { sound } = await Audio.Sound.createAsync(
    { uri: 'https://example.com/audio.mp3' },
    { shouldLoop: true, rate: 1.0, volume: 1.0 }
  );

  await sound.playAsync();
};

playAudio();

Note: Looping is supported for both audio and video media using the shouldLoop property.