Daily, most of us use various music streaming apps. Without a doubt, the most popular application is Spotify and YouTube music. In this article, I will present a React Native library which we can use to create our own music app. We will discuss its most important functions and finally, I will demonstrate how to build a music streaming app with React Native.
The library we will be talking about is React Native Track Player. It is currently the best audio playback library. It is characterized primarily by ease of implementation, simple configuration and functions that will make your music streaming application look fully professional on digital platforms and with a little work – in terms of functionality it will not differ from the top music mobile apps that you can find on Google Play and the App Store. And so it’s the right place for both music lovers and mobile app developers!
React Native Track Player
As I mentioned earlier, the article will be devoted to the React Native Track Player package. So it’s worth explaining what it is at the very beginning. As the welcome text in the documentation says:
A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!
Sounds good right? In short, we can say that by using it we will create a fully functional music application that we can control from the application level and externally.
Since we’re talking about the React Native library, we don’t have to build separate native apps for iOS and Android, but one music streaming service for both of them using the same code.
So let’s discuss the most important features of React Native Track Player:
Optimized Resource Usage: Tailored to use minimal device resources efficiently, ensuring optimal performance for your app’s needs.
Cross-platform compatibility: Works harmoniously across iOS and Android platforms, aligning with the native design principles of music applications.
Media Control Accessibility: Enables control of the application through various avenues like Bluetooth devices, lock screens, notifications, smartwatches, and car systems.
Caching Capability: Allows for the caching of media files, enabling seamless playback even in scenarios where the internet connection is disrupted.
Background Playback Support: Provides the capability to continue audio playback even when the application operates in the background.
Extensive Customization: Offers comprehensive customization options, including customizable notification icons, enabling tailored own app’s UI experiences as desired by developers.
Native modules
React Native Track Player, known for its cross-platform compatibility, seamlessly operates on both iOS and Android devices. Underlying this compatibility are two pivotal native modules: SwiftAudioEx and KotlinAudio.
SwiftAudioEx is dedicated to empowering seamless operations tailored explicitly for iOS devices. On the other hand, KotlinAudio is meticulously designed for Android, ensuring an optimized and tailored experience on this platform.
These native modules play a critical role in enhancing performance by leveraging platform-specific functionalities. Specifically, they enable the storage of playlists in native data structures, contributing significantly to the app’s efficiency and performance. By employing SwiftAudioEx and KotlinAudio, React Native Track Player strives to deliver an exceptional user experience, optimizing the library’s functionalities to the core features of each platform.
Why React Native Track Player?
React Native Track Player stands out as an optimal choice for music app development due to its streamlined integration process and cross-platform compatibility across iOS and Android.
With a rich feature set encompassing audio playback controls, background mode support, and seamless integration with external devices, it offers efficient and optimized performance, utilizing minimal device resources.
Leveraging native modules for platform-specific functionalities ensures high performance, while its flexibility allows for easy customization of the app’s UI and functionalities. Supported by extensive documentation and an active community, React Native Track Player proves to be a reliable and robust solution for creating music streaming apps in React Native.
“Working with React Native Track Player has truly simplified my approach to building music streaming apps. Its efficiency and user-friendly design make it a standout choice for seamless cross-platform development. From synchronizing audio playback controls to creating immersive user experiences, this library has transformed the way I delve into app development, offering a gateway to create sophisticated applications effortlessly.”
As we gear up to craft our very own music streaming app, understanding the compatibility across different platforms is key. In this section, we’re delving deep into a comparison that highlights the supported streaming types and casting features on both iOS and Android platforms.
Stream Types
Casting
Miscellaneous
React Native Track Player functions
In this chapter, I will discuss some of the most basic functions provided by the library. Some of them we will use later while building your own music streaming app. If you are interested in all the events and functions provided by the library (and there are a lot of them’s quite a lot of them) – I refer you to the documentation.
Player
Feature
Description
setupPlayer(options)
Setup player with options. Sample options: minBuffer, maxBuffer, maxCacheSize.
play()
Plays/resumes current track
pause()
Pause track
stop()
Stops playback
retry()
Replays the current track if it was stopped due to an error
seekBy(offset)
Seeks by a relative time offset in the current track
seekTo(seconds)
Seeks current track to specified time position
setVolume(volume)
Sets the volume
getVolume()
Gets player volume
setRate(rate)
Sets the playback rate
getProgress()
Gets the playback progress – position, duration
getPlaybackState()
Gets the PlaybackState – e.g.ready, playing, paused, stopped.
getPlayWhenReady()
Gets the state of playWhenReady
Queue
Function
Description
add(tracks, insertBeforeIndex)
Adds tracks to the queue
remove(tracks)
Clears the current queue and adds tracks to the empty queue
skip(index, initialPosition)
Skips to a track in the queue
skipToNext(initialPosition)
Skips to the next track
skipToPrevious(initialPosition)
Skips to the previous track
reset()
Resets the player and clear the queue
getTrack(index)
Gets a track object
getActiveTrack()
Gets active track object
getQueue()
Gets a queue
removeUpcomingTracks()
Clears upcoming tracks from the queue
setRepeatMode(mode)
Sets the repeat mode – Loops the current track / Repeats the whole queue / Does Not repeat
Building a Music Streaming App with React Native Track Player
Now that you’re familiar with React Native Track Player and its capabilities, let’s dive into the development of our music app! Here’s a glimpse of what our application will feature:
A fully functional music player showcasing a sample playlist of diverse music tracks.
Core functionalities including play and pause controls for the active song.
An interactive progress bar illustrating the playback status of the currently selected track.
The application’s interface will resemble the following structure:
Let’s write our simple music streaming application
In the next chapters, we will focus on installing the necessary packages and preparing the basic configuration of our streaming app.
To begin, we’ll initiate the installation process by adding the React Native Track Player library:
yarn add react-native-track-player
Following that, we’ll proceed by installing the progress bar package. For this scenario, we’ve opted for ‘@miblanchard/react-native-slider’ due to its extensive functionality and ease of styling:
yarn add @miblanchard/react-native-slider
Want to publish your app without friction?
Get your Essential Checklist for Publishing Expo React Native Apps. A step-by-step guide to deploying apps with confidence and ease.
Check your inbox for free materials
Add Service
Next, let’s incorporate the playback service. It’s crucial to register the playback service immediately after registering the primary React Native application component, typically found in the ‘index.js’ file located in the project’s root directory:
IMPORTANT NOTE: The configuration and components will be stored in the src directory. So if you don’t have it, create it or do it according to your own convention. Above the code I will add the paths to the files I used.
To enable background mode functionality in RN Track Player, we’re required to configure the player to sustain audio playback even when the application is in the background.
Let’s create a file named ‘RNTP-service.js’ to manage this configuration.
Once you’ve completed these steps, you’ll have the groundwork laid for a fully functional music player.
Add player playlist
Before creating the first component, create an array of songs that the music player will use. For each song, ensure to include a URL pointing to the audio file, which could be either a file path or a direct URL.
In the components directory, the initial addition is the TrackList component. This component serves as a clickable list of songs. Upon selecting a song, it activates the track and generates the music queue. Pay special attention to the PlaybackActiveTrackChanged event and the onTrackPress function.
Now that we have the components ready, all that remains is to put everything together. In the App.js file we import the list and player components. In addition to the components, we need to import a const containing a list of songs.
App.js
import AudioPlayer from './src/components/AudioPlayer'
import TrackList from './src/components/TrackList'
import { tracks } from './src/consts/index'
Subsequently, we add the components and pass the tracks array as props to the list component.
And that’s all. Now you should see the player presented at the beginning of this chapter.
I recommend that you play around with the player’s functionalities and then add additional functions such as scrolling to the next/previous song, volume control or support for more than one playlist.
Summary
In this short tutorial, we managed to create a very simple music player that supports a playlist. As you have noticed, the functions and events provided by React Native Track Player make our work much easier, so we can focus more on how the functionality should work rather than how to create it. And this is only a fraction of what this music library provides us.
After a thorough analysis of the API, you will realize that you can create a React Native track player that supports several playlists with full control over the song being played. Offline support will allow you to download a few tracks to your device and play them offline.
Of course, you can always use the expertise of a mobile app development company to help you build a music streaming app that will work anywhere and that you will be able to monetize.
Need someone to build a music streaming app for you?