The Best Audio Player Library for React Native Apps
A comparison of the two best audio player libraries for React Native development: React-Native-Track-Player and React-Native-Sound
A music/audio player is an essential component in many entertainment-focused mobile apps. If you choose React Native to develop your Audio player, you might end up picking from one of two popular library options: React-Native-Track-Player (RN-Track-Player) and React-Native-Sound (RN-Sound).
With this in mind, let’s review the pros and cons of each library.
The content of this article is divided as follows for the convenience of the reader.
- React-Native-Sound
- React-Native-Track-Player
- Audio Play options
- Loading Audio Files
- Audio Playback (Stereo and Mono)
- Documentation
- Community Support
- Conclusion
💡 As an aside, for building React Native apps, consider using a component-driven development approach with reusable Bit components.
Learn more:
1. React-Native-Sound
React-Native-Sound is more of a class than a class component that possesses the ability to manipulate instances with predefined methods without updating props or states. The unpacked size of the library is about 88KB and it is licensed to MIT. It is one of the popular React Native modules for playing audio files in iOS, Android and Windows.
The statement in the NPM documentation of the library which says that ‘the library is in alpha and can have bugs’. This may make a developer who wants to use the library reluctant. However, this has not caused any impact on the number of downloads per week.
The current version of the library is 0.11.2, and from 2016 to 2022, 34 versions have been released.
RN-Sound does not run in a separate service on Android. Therefore it limits the library’s usage only to play simple audio tracks in the foreground like sound effects and voice messages, etc. Yes, you can build a complete music app with RN-Sound but we are going to talk about in the next chapter is something deliberately developed to implement music players.
2. React-Native-Track-Player
React-Native-Track-Player is a fully-fledged React Native audio module implemented for music/any mobile audio applications. The unpacked size of the library is about 2.57MB and it is licensed to Apache 2.0.
The RN-Track-Player was released after RN-Sound as a solution for drawbacks posed by RN-Sound. It was the goal to built a lightweight, fully customizable, multiplatform support React Native library audio player library with all the major media control support, and the expectation became a success. Most of the native features that follow the same design principles followed by real music apps are built together in order to provide an excellent experience to the user as well as to the developer.
The Android support for the react-native-track-player is built on top of Google’s media player library ExoPlayer. The RN-Track-Player run as a separate service on Android resulting in fewer dependencies and high stability. Anyhow, RN-Track-Player supports iOS as well as Windows, also.
Nevertheless, there were many bugs in the 1.0 release versions. With the release of the 2.0 version (The current version is 2.1.2) of the library, most of the issues have been solved successfully and it is stable and safe to be used in commercial-grade applications. From 2017 to 2022, 78 versions of the library have been released.
3. Audio Control Options
Almost all the essential audio control options are available in both react-native-sound and track-player.
Major features such as play, payback completion callback, pause, resume, stop, jump forward/backwards, reset, get duration, get system volume, change volume, change the play mode (audio loops), change speed, get current playtime are some major features supported by both libraries for both android and iOS mobile devices.
In both RN-Sound and RN-Track-Player, background audio play, play in the notification bar and lock-screen options are available [Figure 3].
But there are some variations. In RN-Track-Player, playing audio, controlling audio, and customizing the ‘play in notification bar’ option is supported only in Android while in iOS it supports audio playing only.
In RN-Sound, the ‘play in notification bar’ option is only available in Android only and it cannot be customizable.
A cool built-in function of the RN-Track-Player is that notification bar skin changes with the ‘dominant color of the artwork’ used with the audio clip. For example, if the dominant color of the artwork is grey, then the skin of the artwork also automatically turn greyish [Figure 4].
4. Loading Audio Files to the Player
Loading audio files to the player is another essential factor to be concerned about when you need to make the choice between track-player and react-native-sound.
RN-Sound can load audio files either from the app bundle, other directories (File system) or from the network. Here, load from the network refers to ‘downloading an audio file from a remote storage and then playing in the device’. Yet streaming ability is not implemented in RN-Sound.
Similarly, the RN-Track player also supports play from the app bundle, file system, and remote network. But it supports Streaming, also which is an added advantage in using RN-Track-Player. Regular streaming, DASH, HLS and SmoothStreaming is supported in Android, while only Regular streams and HLS streaming are supported in iOS. Another advantage that comes with streaming capability is the adaptive bitrate streaming and caching support.
With adaptive bitrate streaming the app can load the audio file in varying bit rates according to the bandwidth of the network. And with the caching support, the app can play audio files in offline mode also.
5. Audio Playback (Stereo and Mono)
Both libraries support both stereo and mono audio files. The speciality is that the following RN-Sound’ API can customize the playback option.
getPan(): Return the stereo pan position of the audio player (not the system-wide pan), ranging from -1.0 (full left) through 1.0 (full right). The default value is 0.0 (center).setPan(): value {number} Set the pan, ranging from -1.0 (full left) through 1.0 (full right).getNumberOfChannels: Return the number of channels (1 for mono and 2 for stereo sound), or -1 before the sound gets loaded.
Unfortunately, RN-Track-Player does not have any method to customize but it supports both Stereo and Mono audio clips by default. Therefore, if the app that you are going to build require special features to customize audio playback, then it is inadvisable to use RN-Sound, else RN-Track-Player is sufficient.
6. Documentation
Undoubtedly the documentation of React-Native-Track-Player is more user-friendly than that of React-Native-Sound’s.
From installation to the application of a majority of the APIs available in the library are sufficiently explained in their track player's documentation. There is a comprehensive description of the support of built-in functions and events in the libraries for android and iOS operating systems, thus the developer does not require to run and test before using the library.
In contrast, the documentation of RN-Sound is not quite developer-friendly. Only the essential APIs are highlighted in the NPM documentation. There are some API documentations released by various developers but none of them is more descriptive and comprehensive than that of RN-Track-Player.
7. Community Support and Popularity
The biggest fear of any young developer is the poor support from the community built around a certain platform. Yes, most of the time, it is safer to go with something that is used by the majority because there can be at least one individual who might already face the same issue and have solved it before we jump to it again by ourselves.
When focusing on community support, fortunately, there is considerable growth in the users of both libraries. They have raised various issues and, in both libraries majority of such issues have been resolved. But the number of unsolved issues in react-native-sound is much higher compared with the Track Player.
Out of 1100 issues, only 49 are still open in track-player while 297 out of 700 total issues are open in react-native-sound. Therefore it can be observed that the community around track-player is getting bigger.
GitHub Repos (RN-Sound, RN-Track-Player) of both libraries have been reputed with 2000+ stars but when considering the weekly downloads, it is obvious that react-native-sound is more popular than the track-player [Figure 4]. The reason behind this trend being recognized as react-native-sound is more of a skeleton where developers can add various functionalities.
If you are building a music application from scratch then, react-native-sound is a better option. And being smaller in size compared to track-player might be another reason why react-native-sound is more popular.
Here are two best reference projects for both RN-Sound and Track-Player before you start your development:
RN-Sound: https://github.com/johnsonsu/react-native-sound-player
RN-Track-Player: https://github.com/andordavoti/react-native-track-player
8. Conclusion
Both RN-Sound and RN-Track-Player libraries are extensively used in mobile audio/music application development. The popularity of RN-Track-Player is rising due to streaming support, mass customizability, and being rich in native features.
If you want to develop a very lightweight application from the scratch with the hope of integrating advanced features RN-Sound is a good choice.
But to support streaming facilities in your app, you may have to seek the help of another library such as React-Native-Audio-Toolkit.
Nevertheless, whatever the library you are using, in order to get the best results in the final output product you may have to incorporate other libraries such as React-Native-Slider, React-Native-Vector-Icons etc. UI functionalities are better to be implemented with the above libraries and you can invoke APIs in the RN-Track-Player/RN-Sound libraries to implement the complete functionality.
References
Build composable frontend and backend
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Learn more:
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
