如何在 React 中播放来自 blob 对象的音频？答案

【问题标题】：How to play audio from blob object in React?如何在 React 中播放来自 blob 对象的音频？
【发布时间】：2020-01-26 12:47:25
【问题描述】：

我正在尝试使用 ReactJS 创建一个录音机应用程序。我使用了 npm 包react-mic 来达到这个目的。但录音被保存为 blob 对象。

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

【问题讨论】：

标签： javascript reactjs firebase blob

【解决方案1】：

你可以试试这个：https://www.npmjs.com/package/react-player

来自文档：

class App extends Component {
  render () {
    return <ReactPlayer url='<--YOUR BLOB -->' playing />
  }
}

可以找到更详细的示例here - 虽然没有测试，因为我必须连接你的项目。但是看看你的 blob mime-type，它是 webm，这个库支持。

【讨论】：

谢谢。有效。关于如何将此 blob 上传到 firebase 并稍后从那里流式传输的任何想法？
我没用过firebase。我自己主要使用 Azure 表存储，但看看这个：medium.com/@puoygae/… 任何表存储的一般概念是您上传它，它会获得一个特定的 URL，然后您可以从中再次下载它。通常你指定一个容器，然后是一个文件名； firebase_url/container_name/myBlob - 当您想再次获取它时，只需获取它并使用正确的 mime 类型进行流式传输即可。
我们可以使用这个库播放音频 blob 文件吗？我的音频网址：blob:localhost:3001/92bef7a5-1ce3-47bb-82ae-56ded4a01e4c

【解决方案2】：

重要的部分是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 库，我可以向您推荐 react-h5-audio-player,，它更友好。

【讨论】：