如何在 React 中播放來自 blob object 的音頻？

Question

我正在嘗試使用 ReactJS 創建一個錄音機應用程序。 我使用 npm package react-mic來達到這個目的。 但錄音保存為Blob object。

如何在瀏覽器中播放錄制的文件（blob 對象）？ 以及如何將其作為音頻文件上傳到在線存儲？ （如火力基地）

Answer 1

你可以嘗試使用這個： https://www.npmjs.com/package/react-player

從文檔：

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

可以在此處找到更詳細的示例-盡管未經測試，因為我必須將您的項目連接起來。 但是看看你的 blob mime-type，它是 webm，這個庫支持。

Answer 2

重要的部分是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，它更友好。