react-native-audio-waveform
react-native-audio-waveform copied to clipboard
[FEATURE]: save waveform data to file in JSON format + bonuses
As pointed out in this issue, loading audio files on Android can take quite some time. Also, piling up promises for audio extractions could considerably eat up resources.
Therefore, while waiting to fix the Android performance issue and be able to read more and more audio files piling up, it would be better to save the waveform to files and read it instead of continuously extracting it from the file.
One evident scenario is opening and scrolling multiple text conversations where we can have plenty of audio files.
This PR provides this capability: We save the extracted waveform of the audio file to the provided waveFormPath. Then, on the next load, we read the JSON data from the file instead of extracting the data live from the audio.
In example/App.tsx, I provided a usage example where we use the item file name and save/read the waveform from the Cache folder with _wf.json. appended to the file name.
Unfortunately, I wanted to save the recorded waveform, but the format differs from the one when reading it from the file, so I left that one out.
I had to integrate react-native-fs for this matter; if needed, I can also switch to rn-fetch-blob, or I could also provide handlers and code this read from/write to file into the App.tsx
Highlights:
- [NEW] Add a new prop to the Waveform component for
staticnamedwaveFormPaththat contains the path of the file where to save the extracted waveform data - [BREAKING CHANGES]
useAudioRecorder#stopRecordingnow returns a formatted object based onIStoppedAudioRecordingDatainstead of two unknown values in an array
Bonuses:
- I review
onChangeWaveformLoadStateto use a default implementation and have a leaner code. - I review
stopRecordingActionpauseRecordingActionresumeRecordingActionand remove all the unnecessaryPromise.resolve&Promise.rejectbloating the code - I moved some API data validation code around the recoding out of
Waveform.tsxand moved it intouseAudioRecorder.tsxto have a better separation of concerns and have leaner code in the component
Note: I'll rebase my PR on origin/develop once PR https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/pull/105 is merged