How To Play Audio From Blob Object In React?

I'm trying to create an audio recorder app using ReactJS. I used the npm package react-mic to serve the purpose. But the recordings were saved as a blob object. How to play the rec

Solution 1:

You could try using this: https://www.npmjs.com/package/react-player

From the docs:

classAppextendsComponent {
  render () {
    return <ReactPlayer url='<--YOUR BLOB -->' playing />
  }
}

And a more elaborate example can be found here - not tested though, as I would have to wire your project up. But looking at your blob mime-type, it's webm, which this library supports.

Solution 2:

The important part is the blobUrl. With it you can create an Audio element. (That is what other libraries do).

For example, in the handleStop() of React Mic, you can set that url in your state :

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

Then you can create an other function/method in your component and create/play the audio object:

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

You can also save the audio object in your state... anyway, this is a topic more about javascript/html than react or React-mic

If you want to use a npm library, i could recommend you the react-h5-audio-player, it is more friendly.