I recently worked on a project where we needed to add audio playback inside a mobile app; I ended up looking into tone generation as well as audio file playback in React Native.
Tone Generators and Audio Playback
Originally, our customer wanted to be able to produce custom tones in the app, and change pitch and volume with a slider. My initial approach given that requirement was to look into open source tone generators, but I quickly found that most options available were not actively maintained, only worked with iOS, and did not include a setting to change the loudness; given that we wanted the app to eventually be cross-platform, a single-platform library did not seem like the right choice.
So then I started looking into web-based open source tone generators, with the thought to embed them via a web view. The limitation there ended up being a technical compatibility issue with an existing live graph we had implemented; I could get either the tone generator or the live graph but the two were not able to coexist in the app view so that was a no-go as well.
The next route I explored was the package react-native-sound, which does not generate tones, but does handle audio playback. When I checked in with our client to let them know this looked like the quickest path to spinning something up, it turned out that their product research had moved them in this direction anyway, so it seemed clear that this was the way forward.
In the end, we delivered a mobile tablet application built in React Native; our client is currently using the iOS app, and Android will be a short hop away when they’re ready for it.
A note on react-native-sound
The react-native-sound package is pretty easy to work with. It does currently have a compiler issue where if you follow the documentation and try to start things up, it will throw an error “Error: can’t find function on_error” which is pretty daunting; it’s no fun to have to troubleshoot before you’ve even started using it. After some digging I found that it’s a pretty simple bug. The ‘sound.js’ file in the node_module invokes a method, onError with a couple parameters around line 75, that does not seem to exist. If you pop out that method call, everything works fine. Aside from that bug, I found the library to be very straightforward to work with.
Header photo by Steve Harvey on Unsplash
