Microphone component into Dash

Hi all,

I was looking for a Dash component that uses the user’s device’s microphone to record sound and save the recorded audio in base64 format. It seems such does not exist so I started to create one, but I’m new to React, so I’d appreciate to get help.

My use case is to build an app that would take speech from user’s microphone and visualize the audio data or do, e.g. speech-to-text with Google Cloud API. The reason I would convert the audio to base64 is that then it could be passed forward to dcc.Store in a callback and then transformed back to audio on the serverside. The recording needs to be done on the clientside in case the app is deployed to a server.

Basically this would require creating such component with React/javascript and then use the Dash boilerplate to turn it into a Dash component. I’m new to javascript/React so I was wondering if someone would want to collaborate with this one.

I’ve created a javascript demo with p5.js just to show the basic functionality.

I’m a bit stuck on how to turn this into React. The end-product should be a Dash component, e.g.
dcc.Mic(id = 'my-id', data = <audio converted in base64>)

If anyone’s interested I’d appreciate the help!

Thanks @adamschroeder for recommending this forum!

2 Likes

@Tuomas_Gu
I believe this will be a very popular component if created. And your idea for an app sounds just as good.

I hope there are community members with React knowledge out there :pray:

3 Likes

In case it helps anybody in the future who stumbles upon this thread, I have released dash-recording-components: dash-recording-components · PyPI

1 Like