How to Play, Pause, Resume Audio in React Native Expo
Post by: Niraj Dhungana
Posted on: Nov 11 2021
#React Native# Expo
In the previous post I showed you how you can read audio files from inside a device using expo-av api. Now in this post we will see how we can play audios from a remote api link. Also, this solution works for the audios that you have read from your device.
If you guys don't know, we've already covered how to build a local audio player using Expo React Native. You can watch the entire video inside YouTube. Or you can only check out this video where you will learn how to play audio from your device.
Ok, without further ado let’s create a new project using
Initializing Audio Player
Now we have our project initialized so let’s create some components to control our audio and we will write entire code inside our App.js.
Don’t be so excited we will not create any fancy UI.
Here inside this code. We are adding a
Text component to render the title of our audio and we are rendering an icon to control our audio file which we will be fetching remotely.
Also we have some
View components and general styling inside it to give our components a nice look.
And you can see we are using
Ionicons component and
audio.filename. So, let’s import Ionicons from
@expo/vector-icons. You don’t need to install anything to use expo-vector-icons, it is already there.
Now your top of the App.js file should look like this. Also add this audio object outside of your App component.
And now if you run your project, you should see something like this.
API to Work With Audio & Video
Now our app looks fine let’s add
expo-av inside our project to play, pause and resume the audio.
After this we need to add some states inside our audio player project.
At first we have
isPlaying state which we will use to update our UI and we have
playbackStatus status states as well. We will use them to
resume our audio.
Now we need to instantiate our
Audio.Sound and we will do that inside
Here we are checking if
playbackObject is null then we want to update our
new Audio.Sound(). Now we can use playbackObject to control our audio, whether it's coming from remote api or from our device.
Handling Play, Pause & Resume
Let's add some code to our Ionicons so that we can control our audio and update UI at the same time.
Here inside this code as you can see we are just updating the
name prop and adding
onPress prop. With this now our icon will change according to
isPlaying state and we will create that
handleAudioPlayPause method to play, pause and resume the audio.
Let's create handleAudioPlayPause method.
As you can see inside this
handleAudioPlayPause method first we are checking if
null. If this condition matches, it means our app is running for the first time. So, now we want to play our audio.
To play any audio with
expo-av we can use that
playbackObject returned from the
new Audio.Sound() object. So, now we can use the
Also you can see we are logging the returned status from that
playbackObject.loadAsync method. If you see inside your terminal you will see a long object with some interesting values. Like audio url, isPlaying, isPaused, isBuffering and bunch of other values.
First we need to pass the audio
uri that we want to play and as the second argument we can pass the status object. Like here we are passing
true. Now if you run your app and tap on that play icon your audio should play.
But you can not pause or stop you audio. For that first you need to add these codes inside your
Now your if block should look like this.
This will update
playbackStatus states inside our app. Let's add some more code which will help us to pause and resume our audio.
If you see these if statements then they are self explanatory. First we are checking if playbackStatus.isPlaying and we can do this because before that we updated our playbackStatus when we first played our audio.
If this condition matches it means our audio is already playing. So, we can use playbackObject.pauseAsync method to pause our audio. After that we are updating our isPlaying and playbackStatus sates.
At last we are checking if our playbackStatus is not playing it means our audio is in pause state. So, now we want to resume our audio.
You can check out the complete project here.
- React Native Multi Select on Long Press - Touchable Opacity.
- How to Setup react-native-cli and Android Emulator on Windows
- How to Compress or Manipulate Images in React Native Expo
- RecyclerListView – React Native Everything You Need to Know
- React Native Android Emulator - "could not compile settings file"