What is the method to show an audio player in a React Native Expo application?

edit

To show an audio player in a React Native Expo application, we can use the following steps:

1. Install the Expo AV library by running the following command in the terminal:

expo install expo-av

1. Import the required components from the Expo AV library:

import { Audio } from 'expo-av';

1. Create a state object to store the audio status and set the initial state to 'loading':

const [audioStatus, setAudioStatus] = useState({ isLoading: true });

1. Use the useEffect() hook to load the audio file and update the audio status:

useEffect(() => {
  async function loadAudio() {
    const soundObject = new Audio.Sound();
    try {
      await soundObject.loadAsync({ uri: 'audio_file_url.mp3' });
      setAudioStatus({ soundObject });
    } catch (error) {
      console.log(error);
    }
  }
  loadAudio();
}, []);

1. Render the audio player component and set the playback controls:

return (
  <View>
    {audioStatus.isLoading && <ActivityIndicator />}
    {!audioStatus.isLoading && (
      <>
        <Button title="Play" onPress={() => audioStatus.soundObject.playAsync()} />
        <Button title="Pause" onPress={() => audioStatus.soundObject.pauseAsync()} />
        <Button title="Stop" onPress={() => audioStatus.soundObject.stopAsync()} />
      </>
    )}
  </View>
);

Note: Replace 'audiofileurl.mp3' with the actual URL of the audio file that needs to be played.