Create a voice recorder with React

When we develop a web app we can think browsers like a swiss knifes, these include a bunch of utilities (APIs), one of them is get media devices access througth mediaDevices API from the navigator object, this allows to devs create features related wit…


This content originally appeared on DEV Community and was authored by Leonardo Bravo

When we develop a web app we can think browsers like a swiss knifes, these include a bunch of utilities (APIs), one of them is get media devices access througth mediaDevices API from the navigator object, this allows to devs create features related with the user media devices, this features migth be create voice notes, like Whatsapp Web does.

Today we're gonna create an app that records the user's voice and then saves the recorded voice on an <audio> tag will be played later, this app looks like this

recorder app

Apart mediaDevices API we require

  • MediaRecorder constructor, this creates a recorder object from the requested media device througth mediaDevices.getUserMedia() method.
  • Blob constructor, this one allows create a blob object from the data adquired from MediaRecorder instance.
  • URL.createObjectURL(blob) method, this creates a URL, the URL contains the data (voice) create previously from the Blob instance and it is gonna be use like <audio src=URL/.

If you don't understand, don't worry, I'll explain you below. First, look at the <App/> component.

app component

<App/> consumes a custom hook that provides the recorderState and several handlers. If you don't know how to use a custom hook I share with you a post about this.

The recorderState is like this:
recorder state

  • recordingMinutes and recordingSeconds are use to show the recording time and initRecording initializates the recorder.
  • The other parts of the state, mediaStream will be the media device provide by mediaDevices.getUserMedia() and mediaRecorder will be the instance of MediaRecorder, audio will be the URL mentioned previously.

mediaStream is set by the handler startRecording
start recording

After set the mediaStream, MediaRecorder instance is created
create media stream

Then audio is set
set audio

To adquire the voice and create the audio mediaRecorder needs create two event listeners ondataavailable and onstop the first one gets chunks of the voice and pushes it to the array chunks and the second one is use to create the blob througth chunks then audio is created. The stop event is fired by saveRecording handler or the effect cleanup function, the cleanup function is called when recording is cancel.

save recording

Now take a look at the components <RecorderControls/> and <RecordingsList/>.

<RecorderControls/>
recorder controls

<RecorderControls/> have the prop handlers and this is used by the jsx

<RecordingsList/>
recordings list

<RecordingsList/> receives audio and consumes a custom hook that pushes the audio created previously.

use recorginds list

The handler deleteAudio is like this
delete audio

And that's it! With React we can make use of useEffect to access the user devices and create related features.

Final Notes

  • You can find the source code at Github


This content originally appeared on DEV Community and was authored by Leonardo Bravo


Print Share Comment Cite Upload Translate Updates
APA

Leonardo Bravo | Sciencx (2021-08-17T01:56:10+00:00) Create a voice recorder with React. Retrieved from https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/

MLA
" » Create a voice recorder with React." Leonardo Bravo | Sciencx - Tuesday August 17, 2021, https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/
HARVARD
Leonardo Bravo | Sciencx Tuesday August 17, 2021 » Create a voice recorder with React., viewed ,<https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/>
VANCOUVER
Leonardo Bravo | Sciencx - » Create a voice recorder with React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/
CHICAGO
" » Create a voice recorder with React." Leonardo Bravo | Sciencx - Accessed . https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/
IEEE
" » Create a voice recorder with React." Leonardo Bravo | Sciencx [Online]. Available: https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/. [Accessed: ]
rf:citation
» Create a voice recorder with React | Leonardo Bravo | Sciencx | https://www.scien.cx/2021/08/17/create-a-voice-recorder-with-react/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts