react-native-audio-waveform icon indicating copy to clipboard operation
react-native-audio-waveform copied to clipboard

[FEATURE]: save waveform data to file in JSON format + bonuses

Open dprevost-LMI opened this issue 1 year ago • 0 comments
trafficstars

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 static named waveFormPath that contains the path of the file where to save the extracted waveform data
  • [BREAKING CHANGES] useAudioRecorder#stopRecording now returns a formatted object based on IStoppedAudioRecordingData instead of two unknown values in an array

Bonuses:

  • I review onChangeWaveformLoadState to use a default implementation and have a leaner code.
  • I review stopRecordingAction pauseRecordingAction resumeRecordingAction and remove all the unnecessary Promise.resolve & Promise.reject bloating the code
  • I moved some API data validation code around the recoding out of Waveform.tsx and moved it into useAudioRecorder.tsx to 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

dprevost-LMI avatar Oct 06 '24 20:10 dprevost-LMI