繁体   English   中英

如何在 React 中播放来自 blob object 的音频?

[英]How to play audio from blob object in React?

我正在尝试使用 ReactJS 创建一个录音机应用程序。 我使用 npm package react-mic来达到这个目的。 但录音保存为Blob object。

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

在此处输入图像描述

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

从文档:

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

可以在此处找到更详细的示例-尽管未经测试,因为我必须将您的项目连接起来。 但是看看你的 blob mime-type,它是 webm,这个库支持。

重要的部分是blobUrl。 有了它,您可以创建一个音频元素。 (这就是其他图书馆所做的)。

例如,在 React Mic 的 handleStop() 中,您可以在 state 中设置 url:

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

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

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

您还可以将音频 object 保存在 state 中......无论如何,这是一个关于 javascript/html 的主题,而不是 react 或 React-mic

如果您想使用 npm 库,我可以向您推荐react-h5-audio-player,它更友好。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM