如何保存 blob 并使用 wavesurfer 播放

Question

I'm creating a chat application where audio messages can be recorded.

I am creating blobs using react-mic. This is where i run into problems.

Can i just stringify the blob, save it to my DB and then pull it, reverse it and play it with Wavesurfer?

Also I dont think i'm really thinking about this the right way, because the blob:URL is always a local host adress?

Answer 1

Use the "loadBlob" method to play the audio directly.

If you want to store the audio file for later use, simply add a reference URL in your db that points to the audio file within CDN.

Heres how my AudioPlayer component defines how to load the audioData

 wavesurfer.current = WaveSurfer.create(options);

  if (!audioData) return;

  if (typeof audioData === "string") {
    wavesurfer.current.load(audioData); // must be a URL
  } else {
    wavesurfer.current.loadBlob(audioData); //must be a Blob
  }