Register for our upcoming webinar, Best practices in mobile CI/CD development with Slack, Headspace, and Bitrise
Save your seat

Sound in React Native Apps 101: Tutorial With Examples

Sound in React Native Apps 101: Tutorial With Examples

Want the latest trends in mobile development every 2 weeks? Sign up for our newsletter!

Thank you for subscribing to our blog!

gradient

Sound in any mobile application is a pleasurable user experience. It’s a must in gaming applications, but also used in a variety of other applications. It also enhances the user experience when we play a small sound on the press of a button or when receiving a notification.

In this post, we’ll create a small xylophone app, which will play different sounds when a user presses different buttons. We’ll use the simple expo-av package to play sound in our project. There’s another popular package called react-native-sound, but it’s not as stable as the expo-av package.

Basic Setup

First, we’ll create a new React Native app using the Expo CLI. To do this, we need the Expo CLI to be installed globally in our system. To install it, run the below code. If you’ve already installed the Expo CLI, then skip this step.

npm install -g expo-cli

After Expo is installed, we’ll create a new React Native project. For this, we need to navigate to any folder in the terminal and use expo init followed by the project name.

expo init react-native-xylophone

Now, we’ll be asked to choose a template. Don’t change anything and press the enter key, as we need a blank template.

React Native Sound 1

Our project is now ready to use as we’ve received the success message.

React Native Sound 2

Start Xylophone Project

To start a React Native project, we need to navigate to the directory and run npm start. The process is shown below.

React Native Sound 3

It will start the Metro bundler application in http://localhost:19002/. We get different options for how to run our application. The app can be run in Android Emulator or an iOS emulator. We can even run it in the web browser, which shows the web version of the app.

React Native Sound 4

However, running the app on an emulator is a very resource-intensive task and requires a high configuration system. I generally run the app on a physical device, which is faster.

Next, we’ll scan the QR code in http://localhost:19002/ through a mobile application called Expo Go. This application is available in both the App Store and Google Play Store.

Open the Expo app on your mobile device, and click on the “Scan QR Code” tool.

React Native Sound 6

If the app is loaded successfully, it will show the default text “Open up App.js to start working on your app!”

React Native Sound 6

Setting Up

As mentioned earlier in this post, we’ll use the expo-av package in our project. It allows us to play audio files in our app.

Open your terminal and add the package using the command below:

npm install expo-av

Now, we’ll open the code in Visual Studio Code, and in the assets folder, we’ll add seven sound files. You can add any small sound files. We’re also adding the required imports in our App.js file. Two constant variables buttonColor and xylophoneSounds are created.

The buttonColor variable contains seven colors, which we’ll be using on our buttons. The xylophoneSounds variable contains imports to all of our sound files in the assets folder.

React Native Sound 7

Building the User Interface

Now, we’ll build our user interface. So, inside the return statement, we’ll wrap everything with a View, which contains a container style. Next, we’ll be mapping through the buttonColor array declared earlier. Here, again, we have a View first, which has a style and key.

Inside the View, we have a TouchableOpacity, which contains the style as an array. So, with this array, we’re showing common button styles and the specific button style. We get the specific button style from the buttonColor array.

The onPress handler will call the handlePlaySound function, which is now empty. Next, we have a Text field, which shows the word “Sound” with a number. The number is taken from the index by adding the number 1 to it.

React Native Sound 8

It’s time to add styles in the StyleSheet for all the styles we created above. We have simple styles for the container, which shows it in the center. The buttonContainer and the button styles are also self-explanatory.

React Native Sound 9

Now, our app interface is complete, and it looks like the below.

React Native Sound 10

Play Audio Files

To play audio files, we need audio calls from expo-av. We already imported this earlier. Now, we’re calling a function handlePlaySound() on the click of any button. The logic to play the sound is in this function, so we’ll check it now.

The function is async because we’re using await inside it for the asynchronous task of playing an audio file. Inside the function, we’re first creating a new sound object, soundObj. Then we’ll do the asynchronous task inside a try/catch block.

We’re getting the source from the xylophoneSounds array. Here, we’ll be passing a random number from 0 to 6, using the Math.random logic. So, every time we click a button, a new random index will be passed. Suppose we get the random number 1 from Math.random logic; then we’ll call xylophoneSounds[1], and it will return equire(‘./assets/sound2.wav’).

Now, we’ll use a loadAsync and pass the source. It’s an await because it takes a fraction of a second to load this file. After that, we’re playing the file using the playAsync method, and it will return a promise. We’re getting the playbackStatus method in the then statement. It’s used to unload the media file from the memory once it’s played.

We’ll use the unloadAsync method on soundObj to unload the media file. The setTimeout value depends upon playableDurationMillis, which is the duration of the audio file.

1

Now, our app is complete and playing different sounds upon the pressing of the buttons.

React Native Sound 12

Building Our React Native Sound App

The APK or IPA file is required to deploy our app in both app stores. It’s also required for testing, which we’ll cover in the next section. To create an APK file with Expo is very easy, in comparison to the React Native CLI. We’ll follow the instructions, which are in the official docs.

First, open your terminal and run the below command from the folder containing the project.

expo build:android

Next, we need to give the Android package a name. It’s best to use the default suggested by Expo and press enter.

React Native Sound 13

On the next screen, also leave the default option of “APK” and press enter.

React Native Sound 14

Next, we’ll be asked to upload a keystore or generate a new one. Leave the default option as “Generate new keystore” and press enter.

React Native Sound 14b

The APK build process will start, which will take a good 10 to 20 minutes to finish. Once it’s finished, we’ll get a link to our build.

React Native Sound 15

Copy the link, open it in a browser, and save it on the local disk. Now, we’re ready to test the app.

No-Code Testing

The easiest way to test our code is Waldo’s no-code testing platform. We’ll use the APK file saved on our computer from the previous step.

But first, we need to create a new free Waldo account here. Then we’ll need to upload the APK file.

For existing accounts that already have a build, click the + icon and then click “Upload a new build.”

React Native Sound 16

We’ll get a pop-up to upload the APK file.

React Native Sound 17

The process to upload an APK file is very fast and takes two to three minutes. Our app will also be verified after that.

React Native Sound 18

We’ll see our successful builds on the next screen. So then select the build that we want to test.

React Native Sound 19

We’ll enter the interaction for our app on the next screen, which will emulate a user’s interaction with our app.

React Native Sound 20

Our test will run when we click on the “Save test” button.

React Native Sound 21

Conclusion

We’ve learned to implement sound in a React Native application in this post. We implemented the sound easily using the expo-av package in React Native.

Next, we learned to create an APK file using Expo. We also effortlessly conducted testing using the no-code platform offered by Waldo.

If you’re looking for an easy, codeless way to test your mobile apps, we encourage you to give Waldo a try for free.

This post was written by Nabendu Biswas. Nabendu has been working in the software industry for the past 15 years, starting as a C++ developer, then moving on to databases. For the past six years he’s been working as a web-developer working in the JavaScript ecosystem, and developing web-apps in ReactJS, NodeJS, GraphQL. He loves to blog about what he learns and what he’s up to.

Say goodbye to quality issues and say hello to faster release cycles.

Get Started
Llama happy
gradient