如何在 React 中播放 blob 对象的音频？

我正在尝试使用 ReactJS 创建一个录音机应用程序。我使用了 npm 包反应麦克风 https://www.npmjs.com/package/react-mic服务于目的。但录音被保存为blob object.

如何在浏览器中播放录制的文件（blob对象）？以及如何将其作为音频文件上传到在线存储？ （如火力基地）

重要的部分是 blobUrl。使用它您可以创建一个音频元素。 （这就是其他图书馆所做的）。

例如，在 React Mic 的 handleStop() 中，您可以在您的状态中设置该 url：

const handleStop = (recordedBlob) => {
    const url = URL.createObjectURL(recordedBlob.blob);
    setSrc(url) //setting the url in your state. A hook in this case btw
  }

然后您可以在组件中创建其他函数/方法并创建/播放音频对象：

const handlePlay = () => {
    const tmp = new Audio(src); //passing your state (hook)
    tmp.play() //simple play of an audio element. 
  }

您还可以将音频对象保存在您的状态中...无论如何，这是一个更多关于 javascript/html 的主题，而不是 React 或 React-mic

如果你想使用 npm 库，我可以推荐你反应-h5-音频播放器， https://www.npmjs.com/package/react-h5-audio-player它更友好。