如何保存 blob 并使用 wavesurfer 播放

Question

我正在创建一个可以记录音频消息的聊天应用程序。

我正在使用 react-mic 创建 blob。 这是我遇到问题的地方。

我可以将 blob 字符串化，将其保存到我的数据库中，然后将其拉出、反转并与 Wavesurfer 一起播放吗？

另外我不认为我真的以正确的方式考虑这个问题，因为 blob:URL 始终是本地主机地址？

Answer 1

使用“loadBlob”方法直接播放音频。

如果您想存储音频文件以供以后使用，只需在您的数据库中添加一个指向 CDN 中的音频文件的参考 URL。

下面是我的 AudioPlayer 组件如何定义如何加载 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
  }