Loading...
Loading...
Guide for using expo-audio to implement audio playback and recording in React Native apps. Apply when working with audio features, sound playback, recording, or text-to-speech functionality.
npx skill4agent add jchaselubitz/drill-app expo-audioexpo-audioexpo-audioexpo-avnpx expo install expo-audioexpo-audioapp.json{
"expo": {
"plugins": [
[
"expo-audio",
{
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone.",
"recordAudioAndroid": true
}
]
]
}
}microphonePermissionfalserecordAudioAndroidtrueUIBackgroundModesapp.json{
"expo": {
"ios": {
"infoPlist": {
"UIBackgroundModes": ["audio"]
}
}
}
}AudioPlayeruseAudioPlayer()createAudioPlayer()AudioRecorderuseAudioRecorder()useAudioPlayerimport { Button, View } from "react-native";
import { useAudioPlayer } from "expo-audio";
const audioSource = require("./assets/sound.mp3");
export default function App() {
const player = useAudioPlayer(audioSource);
return (
<View>
<Button title="Play" onPress={() => player.play()} />
<Button title="Pause" onPress={() => player.pause()} />
<Button
title="Replay"
onPress={() => {
player.seekTo(0);
player.play();
}}
/>
</View>
);
}expo-avexpo-audioplay()seekTo(seconds)createAudioPlayerimport { AudioPlayer, createAudioPlayer, setAudioModeAsync } from "expo-audio";
let player: AudioPlayer | null = null;
export async function loadSound(uri: string): Promise<void> {
// Configure audio mode
await setAudioModeAsync({
playsInSilentMode: true,
allowsRecording: false,
});
// Create player
player = createAudioPlayer({ uri });
}
export async function playSound(volume: number = 1.0): Promise<void> {
if (!player) {
await loadSound("https://example.com/sound.mp3");
}
if (player) {
player.volume = volume;
player.seekTo(0);
player.play();
}
}
export async function releaseSound(): Promise<void> {
if (player) {
player.release();
player = null;
}
}createAudioPlayerrelease()import { useEffect, useState } from "react";
import { Button, View } from "react-native";
import {
AudioModule,
RecordingPresets,
setAudioModeAsync,
useAudioRecorder,
useAudioRecorderState,
} from "expo-audio";
export default function App() {
const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
const recorderState = useAudioRecorderState(audioRecorder);
const record = async () => {
await audioRecorder.prepareToRecordAsync();
audioRecorder.record();
};
const stopRecording = async () => {
// Recording available on `audioRecorder.uri`
await audioRecorder.stop();
};
useEffect(() => {
(async () => {
const status = await AudioModule.requestRecordingPermissionsAsync();
if (!status.granted) {
Alert.alert("Permission to access microphone was denied");
}
await setAudioModeAsync({
playsInSilentMode: true,
allowsRecording: true,
});
})();
}, []);
return (
<View>
<Button
title={recorderState.isRecording ? "Stop Recording" : "Start Recording"}
onPress={recorderState.isRecording ? stopRecording : record}
/>
</View>
);
}volumeisPlayingisLoadeddurationcurrentTimeplay()pause()seekTo(seconds: number)release()createAudioPlayeruseAudioPlayerStatus()import { useAudioPlayer, useAudioPlayerStatus } from "expo-audio";
const player = useAudioPlayer(source);
const status = useAudioPlayerStatus(player);
// status.isPlaying, status.currentTime, status.duration, etc.prepareToRecordAsync(options?)record()stop()pause()release()import { RecordingPresets } from "expo-audio";
// Available presets:
RecordingPresets.HIGH_QUALITY;
RecordingPresets.LOW_QUALITY;setAudioModeAsync()import { setAudioModeAsync } from "expo-audio";
await setAudioModeAsync({
playsInSilentMode: true, // Play even when device is in silent mode
allowsRecording: false, // Allow recording (required for recording)
interruptionMode: "duck", // 'duck' | 'mix' | 'doNotMix'
});// app/_layout.tsx
import { useEffect } from "react";
import { loadGongSound, unloadGongSound } from "../lib/audio";
export default function RootLayout() {
useEffect(() => {
loadGongSound();
return () => {
unloadGongSound();
};
}, []);
return <Stack />;
}import { createAudioPlayer, setAudioModeAsync } from "expo-audio";
let player: AudioPlayer | null = null;
export async function playSound(volume: number = 1.0): Promise<void> {
if (!player) {
await setAudioModeAsync({ playsInSilentMode: true });
player = createAudioPlayer({ uri: "https://example.com/sound.mp3" });
}
if (player) {
player.volume = volume;
player.seekTo(0);
player.play();
}
}// Important: expo-audio doesn't auto-reset position
player.seekTo(0); // Reset to beginning
player.play(); // Play from startexpo-audioseekTo(0)useAudioPlayer()Audio.Sound.createAsync()player.volume = 0.5player.setVolumeAsync(0.5)const { sound } = await Audio.Sound.createAsync({ uri });
await sound.setVolumeAsync(0.5);
await sound.setPositionAsync(0);
await sound.playAsync();const player = createAudioPlayer({ uri });
player.volume = 0.5;
player.seekTo(0);
player.play();kbumsik/opus-media-recorderimport { AudioModule } from "expo-audio";
const status = await AudioModule.requestRecordingPermissionsAsync();
if (!status.granted) {
// Handle permission denied
}const status = await AudioModule.getRecordingPermissionsAsync();
// status.granted, status.canAskAgain, etc.useAudioPlayer()release()createAudioPlayer()seekTo(0)playsInSilentMode: true