hackingbeauty / react-mic

Record audio from a user's microphone and display a cool visualization.
https://hackingbeauty.github.io/react-mic/
450 stars 156 forks source link

Blobs received in onData function are unusable #115

Open shalabhsingh opened 3 years ago

shalabhsingh commented 3 years ago

So I have been unable to play/use the blobs received in the onData function after several attempts. However, the blob received in the onStop function is perfect to use.

Steps to reproduce

I defined a function saveBlob which downloads the blob file as and when they are generated in the code.

  saveBlob(blob, fileName) {
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      var url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
  }

onData(recordedBlob){
    this.saveBlob(recordedBlob, "streamAudio.webm")
}

onStop(recordedBlob) {
    this.saveBlob(recordedBlob.blob, "finalAudio.webm")
}

FYI, I am using the webm audio format. Also, the first few seconds ae not getting recorded as previously pointed out in #71

I think it is a bug, or is there something that I am doing wrong?