React Native Audio Player and Recorder V3

Published in

dooboolab

3 min readMay 9, 2021

react-native-audio-recorder-player is out with major changes starting from version 3.

https://github.com/hyochan/react-native-audio-recorder-player

Since the first release and post, I’ve not managed the module for a long time and I’ve just got time to come back and maintain it.

Today, I would like to share the changes I’ve made in version 3.

1 . The codebase has been re-written in `Swift` and `Kotlin` .

Altough, react-native is built-in Java and Objective C, I’ve made these changes for future maintenance. As time goes by, the Java user and the Objective C users decrease so I’d wanted to migrate them to hopefully share codes with others more sustainably.

You now need additional setup to install react-native-audio-recorder-player in your project for your project to understand Kotlin and Swift codes. They are described in the post-installation section in the readme.

Furthermore, this project will be useful to others who want to migrate customer modules to Kotlin and Swift.

2 . Features

Pause and resume recording feature

The above feature was requested many times like in #222, #170, #116, #15, and finally, this is done. However, the downside is that in android, you now need minSdk of 24 . You can check out the PR in #286 🙌.

3 . Migrations

AVAudioPlayer is migrated to AVPlayer in iOS which is used for player

The downside of using AVAudioPlayer is that it does not support streaming since it is not provided to handle the network audio. Therefore, previously, we had to download the network audio before actually playing it which make the device take time before actually playing it. The related issues can be found in #275, #21.

3 . Refactors

Renamed listener callback variables from snake_case to camelCase

Below types are newly provided. As you can see, all variables are written in camelCase .

export type RecordBackType = {
  isRecording?: boolean;
  currentPosition: number;
  currentMetering?: number;
};export type PlayBackType = {
  isMuted?: boolean;
  currentPosition: number;
  duration: number;
};

Subscription duration defaults to 0.5 which is 500ms.

Related #273

Default file paths have changed to cacheDirs.

Default android path is now {cacheDir/sound.mp4}
Default iOS path is now {cacheDir/sound.m4a}

The current change was made because of the breaking issue in Android 10 . In the previous version, the android was referencing the sdcard which now is deprecated and will be removed in the future. Related #241.

If you want to manage the file URI more specifically, there are some other libraries like react-native-fetch-blob or rn-fetch-blob which is recent.

Check out the PR #287.