DEV Community

Cover image for Create a voice recorder with React

Create a voice recorder with React

Leonardo Bravo on August 17, 2021

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 ac...
Collapse
 
akashshyam profile image
Akash Shyam

Can you replace the images with code blocks? We can copy it easily then...

Collapse
 
world187 profile image
world187

how can i create a way for a user to respond directly to a voice recording like for example if jhon recorded a comment and i wanted to respond to jhon how would i structure that

Collapse
 
jleonardo007 profile image
Leonardo Bravo

I'm not sure on what you mean? Let's see if I got it: Do you want create a comment system? Like IG but with voice recordings?

Collapse
 
world187 profile image
world187 • Edited

thanks for responding yes thats exactly what im trying to do

Thread Thread
 
jleonardo007 profile image
Leonardo Bravo • Edited

I will try my best...

First you need an array of objects , each one is a specific recording. The recording structure can be as follow:

Recording: {
id: you can use UUID,
voiceNote: {
id,
data
},
from: user that made the comment,
to: user that create the post ,
nestedComments: [Recording]
}

this structure will be the main, you can add another fields like createdAt, updatedAt, etc. I hope it results usefull for you.

PD: about the voiceNote field you need to convert the blob to any audio format if you want store on a static resources store like S3, if I'm not wrong OGG is better for web.

Thread Thread
 
world187 profile image
world187

Thanks a lot I really appreciate it man I'm going to try it out 9 out of 10 I'll probably be writing you again for some assistance

Collapse
 
abogaard profile image
abogaard

Ciao Leonardo, I've found that in Chrome, you can replay the recorded audio once, but then for some period of time it appears to be muted. Then it plays OK again. Firefox doesnt have this weird behavior. I'm looking into it, but do you have any thoughts?

Thanks for sharing this work

Collapse
 
jleonardo007 profile image
Leonardo Bravo

Hello abogaard! I'm not sure on what's happening with recorder on Chrome! Could be a Chrome issue or an unexpected bug(I think could be a blob creation bug). If you can resolve this don't hesitate share your solution here or recorder repo.

Regards!

Collapse
 
yashvasoyar profile image
YashVasoyaR

@leonardo Bravo Thanks for this Code, I want to add more condition in this recorder like that: Recorder can not Stop Before 10s and Recorder can auto stop after 60s.
Is that possible? Please replay ASAP. Thanks In advance.

Collapse
 
djoscarmix profile image
Oscar Alberto Ceballos Contreras

Hello Leonardo How can i save the notes, and persist the data?

Collapse
 
typosbro profile image
Azizbek Umidjonov

Great. This is exactly what I've been looking for