Creating an Audio Player in React Native

React Native is a popular open source JavaScript framework for creating cross-platform mobile applications. It is a great tool for developing audio players for Android and iOS. In this tutorial, we will learn how to create an audio player in React Native and add audio files to the project. We will also explore how to pause, play, and record audio files in React Native.

react native audio player

Setting up the React Native Project

To get started, we will need to set up a React Native project. We can do this by using the React Native CLI.

First, we will need to install the CLI:

npm install -g react-native-cli

Once the CLI is installed, we can create a new React Native project. We will name our project AudioPlayer:

react-native init AudioPlayer

This will create a new React Native project in the AudioPlayer directory.

Installing react-native-track-player & dependencies

Next, we will need to install the react-native-track-player library. This library provides an easy way to play audio files in React Native.

We can install the library by running the following command:

npm install --save react-native-track-player

We will also need to install the following dependencies:

To install these dependencies, run the following commands:

npm install --save react-native-vector-icons
npm install --save react-native-sound
npm install --save react-native-track-player-background

Building the Audio Player UI

Now that we have installed the necessary dependencies, we can begin building the audio player UI. We will start by creating a new component called AudioPlayer.js:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const AudioPlayer = () => {
  return (
    <View style={styles.container}>
      <Text>Audio Player</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default AudioPlayer;

This component will be the main container for our audio player. We will add the necessary UI components such as buttons and sliders to control the audio player.

Adding Audio Files to the React Native Project

Now that we have created the audio player UI, we will need to add audio files to the project. We can do this by creating a /assets/audio directory in the project root and adding the audio files to this directory.

Playing Audio Files in React Native

Now that we have added the audio files to the project, we can begin playing them. To do this, we will need to use the react-native-track-player library.

First, we will need to import the trackPlayer module:

import trackPlayer from 'react-native-track-player';

Next, we will need to define the audio files that we want to play:

const tracks = [
  {
    id: 'track1',
    url: require('./assets/audio/track1.mp3'),
    title: 'Track 1',
    artist: 'Artist 1'
  },
  {
    id: 'track2',
    url: require('./assets/audio/track2.mp3'),
    title: 'Track 2',
    artist: 'Artist 2'
  },
  // ...
];

We can now add the tracks to the player:

trackPlayer.add(tracks);

Finally, we can start playing the audio files:

trackPlayer.play();

Pausing Audio Files in React Native

We can also pause the audio player by using the trackPlayer.pause() method. This will pause the audio player and allow us to resume playback later.

Accessing Device's Microphone in React Native

We can also access the device's microphone in React Native by using the react-native-voice library. This library allows us to record audio from the device's microphone and play it back.

First, we will need to install the library:

npm install --save react-native-voice

Next, we will need to import the library:

import Voice from 'react-native-voice';

Finally, we can start recording audio from the device's microphone:

Voice.start('en-US');

Recording Audio Files in React Native

Now that we have access to the device's microphone, we can begin recording audio files. To do this, we will need to use the Voice.onSpeechStart and Voice.onSpeechEnd methods.

The Voice.onSpeechStart method will be called when the microphone begins recording audio. We can use this method to start recording the audio and save it to a file:

Voice.onSpeechStart = async () => {
  const recording = new Recording();
  await recording.start();
};

The Voice.onSpeechEnd method will be called when the microphone stops recording audio. We can use this method to stop the recording and save the audio file:

Voice.onSpeechEnd = async () => {
  await recording.stop();
  const file = await recording.save();
};

Running the React Native Audio Player

Now that we have completed our React Native audio player, we can run it on an Android or iOS device. To do this, we can use the Expo platform.

First, we will need to install the Expo CLI:

npm install -g expo-cli

Once the CLI is installed, we can run the audio player on an Android or iOS device by running the following command:

expo start

This will open the Expo DevTools in your browser. From here, you can scan the QR code to run the audio player on your device.

Conclusion

In this tutorial, we learned how to create an audio player in React Native and add audio files to the project. We also explored how to pause, play, and record audio files in React Native. Finally, we ran the audio player on an Android or iOS device with the Expo platform.