The State of Audio Libraries in React Native
It’s fragmented, but there are good options out there.
🤔 First off who uses audio in apps anyway?
It’s really not a common need when building apps, web or mobile. However there are multiple reasons you might want audio.
- Music/podcast streaming (Spotify)
- Notification Audio (Venmo/Lyft)
- Voice Over (Google Maps)
- Interactive Audio (Words With Friends)
- Playing Recorded Audio (Memos)
The reason for the fragmentation right now is mostly because different libraries cover different use cases.
Audio Use Cases
- Spotify: Streams/Buffers audio files over the network.
- Venmo/Lyft: Plays a local audio file when a notification fires.
- Memos: Can record a large audio file locally, and play it back via a stream/buffer.
- Google Maps: Mix between fetching local and network audio files.
Before I go over the libraries I‘m going to refer to capabilities of the library in relation to this graph. The horizontal axis ‘Local vs Network’ refers to if you have the sound file locally or if you need to fetch it over the network. Spotify obviously needs to fetch all their audio files over the network while Venmo/Lyft just plays the same local sound whenever you get paid. The vertical axis ‘Streaming vs Not Streaming’ refers to the need to handle the size of the audio file. A three hour long podcast needs an audio library that can stream, if it doesn’t have it will feel like it takes three hours to load. While a small audio file can be loaded in one batch and streaming is an overkill.
✨ Knowing where your use case lies on this graph is important when choosing a library.
Audio Libraries
react-native-audio-toolkit
- Background Audio: Only Android.
- Audio File Location: Local and Network.
- Record Audio: Yes
- Custom Audio Control: Seek, Play, Pause, Loop, Set Volume
- Can Stream Audio Files: No
- Documentation: Well Documented
Last maintained 9 months ago, Started June 2016. No out of the box Media Controls.
react-native-sound
- Background Audio: Only iOS.
- Audio File Location: Local and Network.
- Record Audio: No
- Custom Audio Control: Seek, Play, Pause, Loop, Set Speed, Set Pan, Set Volume
- Can Stream Audio Files: No
- Documentation: Okay Documentation
Last maintained 8 months ago, Started October 2015. No out of the box Media Controls
react-native-video
Yeah this is a video library, but it actually handles streaming audio really well. Just be warned you are getting a lot of extra stuff with this library that you won’t be needing. Audio only is enabled with the handy audioOnly property.
- Background Audio: Android and iOS.
- Audio File Location: Local and Network.
- Record Audio: No
- Custom Audio Control: Seek, Play, Pause, Loop, Set Speed, Set Pan, Set Volume, Control Buffer.
- Can Stream Audio Files: Yes
- Documentation: Well Documented
Actively maintained, Started March 2015. Media Controls have problems.
react-native-track-player
- Background Audio: Android and iOS and Windows.
- Audio File Location: Local and Network.
- Record Audio: No
- Custom Audio Control: Seek, Play, Pause, Loop, Set Volume, Control Buffer, Media Control setup, Google Cast controls (Android only), Caching (Android only).
- Can Stream Audio Files: Yes
- Documentation: Great Documentation
Background audio works. Media Controls out of the box. Casting for android. Easily check buffered state of audio. Local and Network audio files. Advanced API. Caching ability on Android. Actively Maintained, Started March 2017.
Honorable Mentions
react-native-audio-streaming
No longer maintained, but worth calling out since it’s actually pretty decent. Only supports audio files over the network. Can handle non-streaming or streaming audio files. Background audio works. Media Controls out of the box.
react-native-audio
This use to be a viable solution for playing audio but now it seems it’s main only purpose is only recording.
react-native-music-control
This is needed when media controls are not supplied out of the box for other libraries. Works with Android and iOS.
react-native-google-cast
This library is needed if you need to google cast your audio files and not getting this feature out of the box.
Conclusion
Hopefully this saves you some time when picking the right audio library for you. It’s one of the more fragmented solutions out there in the React Native community but in the end you shouldn’t have to write your own library with the great options out there.
I’m currently using react-native-track-player for my podcasting app. For music players with similar functionality to Spotify, I’ve found this library is the easiest to work with and gives the most useful functionality. Shoutout to David Chavez and Guilherme Chaguri for their continued contributions and maintenance over there.
Let me know below if I missed a notable audio library or if you’ve found a better solution the those listed above.
As always be kind in the open source community. Please constructively help maintainers and thank them for their contributions.