YZarytskyi / react-voice-visualizer

React library for audio recording and visualization using the Web Audio API
https://www.npmjs.com/package/react-voice-visualizer
MIT License
114 stars 22 forks source link

Visualizer does not cope well with being unmounted and remounted #6

Closed asquithea closed 5 months ago

asquithea commented 11 months ago

I have put the controls into a context so recording/playback can continue if the user navigates away from the page holding the visualiser component. However, when returning to the page, the visualizer is a bit glitchy - mostly on playback. Nothing that's a show-stopper, but I thought I'd mention these in case you wanted to handle them.

1. Waveform re-initialized when re-mounting during recording

Recording continues as expected, but the waveform is re-initialized. This could give the impression that audio has been lost, though actually it hasn't. I'm not sure it's possible to initialize the picks list from existing audio instead of an empty array, but it looks like it might be?

2. Pause state and Playback point incorrect when re-mounting during playback

Playback continues while away from the page, but when re-mounting the visualizer, playback stops, the offset returns to zero, but the pause state is false when means the controls are out of sync (I'm rendering my own controls).

YZarytskyi commented 10 months ago
  1. Regarding the issue of the waveform being re-initialized during recording, it is currently not possible to initialize the picks list from existing audio.

  2. I would need more details about your implementation to provide a precise solution for the incorrect pause state and playback point when re-mounting the visualizer during playback. Please share relevant code snippets or additional information about how you're handling playback and mounting to assist you better.

YZarytskyi commented 5 months ago

First issue resolved in the 2 version. It is available now