Expo 音频（expo-audio）

Example

import { useAudioPlayer } from 'expo-audio';

function MyComponent() {
  const player = useAudioPlayer(require('./sound.mp3'));

  return (
    <Button title="Play" onPress={() => player.play()} />
  );
}

Example

import { useAudioPlayer } from 'expo-audio';

function MyComponent() {
  const player = useAudioPlayer('https://example.com/audio.mp3', {
    updateInterval: 1000,
    downloadFirst: true,
  });

  return (
    <Button title="Play" onPress={() => player.play()} />
  );
}

Example

import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';

function PlayerComponent() {
  const player = useAudioPlayer(require('./sound.mp3'));
  const status = useAudioPlayerStatus(player);

  return (
    <View>
      <Text>Playing: {status.playing ? 'Yes' : 'No'}</Text>
      <Text>Current Time: {status.currentTime}s</Text>
      <Text>Duration: {status.duration}s</Text>
    </View>
  );
}

Example

import { useAudioPlaylist } from 'expo-audio';

function PlaylistPlayer() {
  const playlist = useAudioPlaylist({
    sources: [
      require('./track1.mp3'),
      require('./track2.mp3'),
      'https://example.com/track3.mp3',
    ],
    loop: 'all',
  });

  return (
    <View>
      <Text>Track {playlist.currentIndex + 1} of {playlist.trackCount}</Text>
      <Button title="Previous" onPress={() => playlist.previous()} />
      <Button title={playlist.playing ? 'Pause' : 'Play'} onPress={() => playlist.playing ? playlist.pause() : playlist.play()} />
      <Button title="Next" onPress={() => playlist.next()} />
    </View>
  );
}

Example

import { useAudioPlaylist, useAudioPlaylistStatus } from 'expo-audio';

function PlaylistStatusDisplay() {
  const playlist = useAudioPlaylist({ sources: [require('./track1.mp3')] });
  const status = useAudioPlaylistStatus(playlist);

  return (
    <View>
      <Text>Track: {status.currentIndex + 1} / {status.trackCount}</Text>
      <Text>Time: {status.currentTime}s / {status.duration}s</Text>
      <Text>Playing: {status.playing ? 'Yes' : 'No'}</Text>
    </View>
  );
}

Example

import { useAudioRecorder, RecordingPresets } from 'expo-audio';

function RecorderComponent() {
  const recorder = useAudioRecorder(
    RecordingPresets.HIGH_QUALITY,
    (status) => console.log('Recording status:', status)
  );

  const startRecording = async () => {
    await recorder.prepareToRecordAsync();
    recorder.record();
  };

  return (
    <Button title="Start Recording" onPress={startRecording} />
  );
}

Example

import { useAudioRecorder, useAudioRecorderState, RecordingPresets } from 'expo-audio';

function RecorderStatusComponent() {
  const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
  const state = useAudioRecorderState(recorder);

  return (
    <View>
      <Text>Recording: {state.isRecording ? 'Yes' : 'No'}</Text>
      <Text>Duration: {Math.round(state.durationMillis / 1000)}s</Text>
      <Text>Can Record: {state.canRecord ? 'Yes' : 'No'}</Text>
    </View>
  );
}

Example

import { useEffect } from 'react';
import { useAudioPlayer, useAudioSampleListener, requestRecordingPermissionsAsync } from 'expo-audio';

function AudioVisualizerComponent() {
  const player = useAudioPlayer(require('./music.mp3'));

  // if required on Android, request recording permissions
  useEffect(() => {
    async function requestPermission() {
      const { granted } = await requestRecordingPermissionsAsync();
      if (granted) {
        console.log("Permission granted");
      }
    }

    requestPermission();
   }, []);

  useAudioSampleListener(player, (sample) => {
    // Use sample.channels array for audio visualization
    console.log('Audio sample:', sample.channels[0].frames);
  });

  return <AudioWaveform player={player} />;
}

Example

import { getRecordingPermissionsAsync, requestRecordingPermissionsAsync } from 'expo-audio';

const ensureRecordingPermissions = async () => {
  const { status } = await getRecordingPermissionsAsync();

  if (status !== 'granted') {
    // Permission not granted, request it
    const { granted } = await requestRecordingPermissionsAsync();
    return granted;
  }

  return true; // Already granted
};

Example

import { preload, useAudioPlayer } from 'expo-audio';

const track1 = 'https://example.com/track1.mp3';
const track2 = 'https://example.com/track2.mp3';

// Preload at module scope — starts buffering immediately
preload(track1);
preload(track2, { preferredForwardBufferDuration: 20 });

export default function App() {
  const player = useAudioPlayer(track1);
  // Playback starts near-instantly because the source was preloaded
  return <Button title="Play" onPress={() => player.play()} />;
}

Example

import { requestNotificationPermissionsAsync } from 'expo-audio';

const checkPermissions = async () => {
  const { status, granted } = await requestNotificationPermissionsAsync();

  if (granted) {
    console.log('Notification permission granted');
  } else {
    console.log('Notification permission denied:', status);
  }
};

Example

import { requestRecordingPermissionsAsync } from 'expo-audio';

const checkPermissions = async () => {
  const { status, granted } = await requestRecordingPermissionsAsync();

  if (granted) {
    console.log('Recording permission granted');
  } else {
    console.log('Recording permission denied:', status);
  }
};

Example

import { setAudioModeAsync } from 'expo-audio';

// Configure audio for background playback with mixing
await setAudioModeAsync({
  playsInSilentMode: true,
  shouldPlayInBackground: true,
  interruptionMode: 'mixWithOthers'
});

// Configure audio for recording
await setAudioModeAsync({
  allowsRecording: true,
  playsInSilentMode: true
});

Example

import { setIsAudioActiveAsync } from 'expo-audio';

// Disable all audio when app goes to background
const handleAppStateChange = async (nextAppState) => {
  if (nextAppState === 'background') {
    await setIsAudioActiveAsync(false);
  } else if (nextAppState === 'active') {
    await setIsAudioActiveAsync(true);
  }
};

Example

import { useEffect } from 'react';
import { useAudioPlayer, useAudioSampleListener, requestRecordingPermissionsAsync } from 'expo-audio';

function AudioVisualizerComponent() {
  const player = useAudioPlayer(require('./music.mp3'));

  // if required on Android, request recording permissions
  useEffect(() => {
    async function requestPermission() {
      const { granted } = await requestRecordingPermissionsAsync();
      if (granted) {
        console.log("Permission granted");
      }
    }

    requestPermission();
   }, []);

  useAudioSampleListener(player, (sample) => {
    // Use sample.channels array for audio visualization
    console.log('Audio sample:', sample.channels[0].frames);
  });

  return <AudioWaveform player={player} />;
}