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](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover20.jpg)
## 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](https:&#x2F;&#x2F;facebook.github.io&#x2F;react-native&#x2F;docs&#x2F;getting-started).

First, we will need to install the CLI:

&#96;&#96;&#96;bash
npm install -g react-native-cli
&#96;&#96;&#96;

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

&#96;&#96;&#96;bash
react-native init AudioPlayer
&#96;&#96;&#96;

This will create a new React Native project in the &#96;AudioPlayer&#96; directory.

## Installing react-native-track-player &amp; dependencies

Next, we will need to install the [react-native-track-player](https:&#x2F;&#x2F;github.com&#x2F;react-native-kit&#x2F;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:

&#96;&#96;&#96;bash
npm install --save react-native-track-player
&#96;&#96;&#96;

We will also need to install the following dependencies:

* [react-native-vector-icons](https:&#x2F;&#x2F;github.com&#x2F;oblador&#x2F;react-native-vector-icons)
* [react-native-sound](https:&#x2F;&#x2F;github.com&#x2F;zmxv&#x2F;react-native-sound)
* [react-native-track-player-background](https:&#x2F;&#x2F;github.com&#x2F;react-native-kit&#x2F;react-native-track-player-background)

To install these dependencies, run the following commands:

&#96;&#96;&#96;bash
npm install --save react-native-vector-icons
npm install --save react-native-sound
npm install --save react-native-track-player-background
&#96;&#96;&#96;

## 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 &#96;AudioPlayer.js&#96;:

&#96;&#96;&#96;javascript
import React from &#x27;react&#x27;;
import { View, Text, StyleSheet } from &#x27;react-native&#x27;;

const AudioPlayer = () =&gt; {
  return (
    &lt;View style={styles.container}&gt;
      &lt;Text&gt;Audio Player&lt;&#x2F;Text&gt;
    &lt;&#x2F;View&gt;
  );
};

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

export default AudioPlayer;
&#96;&#96;&#96;

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 &#96;&#x2F;assets&#x2F;audio&#96; 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 &#96;react-native-track-player&#96; library.

First, we will need to import the &#96;trackPlayer&#96; module:

&#96;&#96;&#96;javascript
import trackPlayer from &#x27;react-native-track-player&#x27;;
&#96;&#96;&#96;

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

&#96;&#96;&#96;javascript
const tracks = [
  {
    id: &#x27;track1&#x27;,
    url: require(&#x27;.&#x2F;assets&#x2F;audio&#x2F;track1.mp3&#x27;),
    title: &#x27;Track 1&#x27;,
    artist: &#x27;Artist 1&#x27;
  },
  {
    id: &#x27;track2&#x27;,
    url: require(&#x27;.&#x2F;assets&#x2F;audio&#x2F;track2.mp3&#x27;),
    title: &#x27;Track 2&#x27;,
    artist: &#x27;Artist 2&#x27;
  },
  &#x2F;&#x2F; ...
];
&#96;&#96;&#96;

We can now add the tracks to the player:

&#96;&#96;&#96;javascript
trackPlayer.add(tracks);
&#96;&#96;&#96;

Finally, we can start playing the audio files:

&#96;&#96;&#96;javascript
trackPlayer.play();
&#96;&#96;&#96;

## Pausing Audio Files in React Native

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

## Accessing Device&#x27;s Microphone in React Native

We can also access the device&#x27;s microphone in React Native by using the [react-native-voice](https:&#x2F;&#x2F;github.com&#x2F;react-native-community&#x2F;voice) library. This library allows us to record audio from the device&#x27;s microphone and play it back.

First, we will need to install the library:

&#96;&#96;&#96;bash
npm install --save react-native-voice
&#96;&#96;&#96;

Next, we will need to import the library:

&#96;&#96;&#96;javascript
import Voice from &#x27;react-native-voice&#x27;;
&#96;&#96;&#96;

Finally, we can start recording audio from the device&#x27;s microphone:

&#96;&#96;&#96;javascript
Voice.start(&#x27;en-US&#x27;);
&#96;&#96;&#96;

## Recording Audio Files in React Native

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

The &#96;Voice.onSpeechStart&#96; 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:

&#96;&#96;&#96;javascript
Voice.onSpeechStart = async () =&gt; {
  const recording = new Recording();
  await recording.start();
};
&#96;&#96;&#96;

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

&#96;&#96;&#96;javascript
Voice.onSpeechEnd = async () =&gt; {
  await recording.stop();
  const file = await recording.save();
};
&#96;&#96;&#96;

## 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](https:&#x2F;&#x2F;expo.io) platform.

First, we will need to install the Expo CLI:

&#96;&#96;&#96;bash
npm install -g expo-cli
&#96;&#96;&#96;

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

&#96;&#96;&#96;bash
expo start
&#96;&#96;&#96;

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.

Creating an Audio Player in React Native

About

Legal

Products

Resources

Category: