How to clear the sinewave when started new recording. about react-mic HOT 6 CLOSED

@AsyncSan You could just take the MicrophoneRecorder lib from react-mic and use it in your own custom UI component. This is how mine looks:

https://gist.github.com/kkkrist/6f985ee0f3e6d7c206fd399786262643

(Most of it is about uploading and safely overwriting previous recordings – e.g. attaching only the latest recording to the parent document when it's actually saved – but you get the idea)

@hackingbeauty Thanks! Will take another look at Visualizer when I have more time.

from react-mic.

Any suggestion on this please...

from react-mic.

<ReactMic> has a clear method that's called after the recording has been stopped. It contains a little bug: It tries to extract width and height from state instead of props:

  clear() {
    const { canvasCtx, width, height } = this.state;
    canvasCtx.clearRect(0, 0, width, height);
  }

A fix would be

  clear() {
    const { width, height } = this.props;
    this.state.canvasCtx.clearRect(0, 0, width, height);
  }

But it will stay clear for a few ms only as as the Visualizer will keep drawing (I guess). So it needs a bit more work.

from react-mic.

@kkkrist, I implemented your bug fix. What else needs to change in the Visualizer?

from react-mic.

Hey @hackingbeauty, I got rid of the Wave with visualSetting="false".
But the Canvas is still an element in the HTML.

Is there a way to remove the canvas completely?

Thanks a lot for the good work

from react-mic.

This issue has been fixed with version 12.4.0 of React-Mic. Thank you!

from react-mic.