CODEWITHSUNDEEP
javascriptreactjsfirebaseblob
Surya
Surya

Reputation: 1091

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 recorded file (blob object) in the browser? And how to upload this as an audio file to online storage? (like firebase)

enter image description here

Upvotes: 2

Views: 10642

Answers (2)

ValRob
ValRob

Reputation: 2682

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 : 

const handleStop = (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: 

const handlePlay = () => {
    const tmp = new Audio(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.

Upvotes: 6

Dennis
Dennis

Reputation: 939

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

From the docs:

class App extends Component {
  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.

Upvotes: 3

Related Questions