How to clear the sinewave when started new recording.

[kalyanpkumar]

When i start recording for very first time the sinewave context is clear... when i stop recording the sine wave is staying as is, so here when recording is stopped, the sinewave has to be cleared.. how to achive that....?

So how to achieve clearing sinewave when stopped recording... we are passing the "record" state as true and false when started and stopped recording... but still sinewave stays... can you please let us know..

Is this anything to do with visualizer? how to clear that too...

[kalyanpkumar]

Any suggestion on this please...

[kkkrist]

<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.

[hackingbeauty]

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

[AsyncSan]

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

[kkkrist]

@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.

[hackingbeauty]

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