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

Hi @danielcahall

Great library and bery easy to use.

I tried to deploy the example code in the Use cases to Heroku but for some reason it will not render the audio play component.

Have you tried any service to deploy it? I was wondering if there are other settings to consider.

Hi @Tuomas_Gu , I have not actually. I received a GitHub Issue about something similar though and it seemed related to browser security policy. If you’re seeing some other behavior though feel free to create an issue. :slight_smile:

TL;DR
These components which access a device microphone or camera require a secure connection for the hosted app/to access via the web. Localhost is secure by definition, so will work, but a lot of (especially free) generic web hosting services are not.

Full Story

Hey @Tuomas_Gu , I created my own version of this component (@danielcahall wish I had seen your post and your excellent work first so I could have saved myself the effort :laughing: ) and I have it deployed to a web app. My component (and looking at the github repo linked here, I see the same method in Daniels’s version) relies on the built-in method getUserMedia:

image

which requires a secure connection. In my case, I tried deploying it as a Dockerized app via AWS first (tried both Elastic Beanstalk as well as containerizing myself, hosting on ECR and deploying on ECS), which is what I’ve done in the past (never used Heroku, so no experience to rely on there). Didn’t work – the frontend/page showed nothing happening when I clicked on the “Record”/“Stop” controls, and the clicks didn’t even show up in the app logs on AWS. Took a look into the web developer console and saw the error Uncaught (in promise) TypeError: navigator.mediaDevices is undefined. Some StackOverflowing later, it turns out that this method to get the device’s microphone/camera is only available for a secure connection, i.e. https .

For what it’s worth, I looked how to send ElasticBeanstalk traffic via https. It’s a huge PITA. However, Azure portal’s Web App server is https by default :slight_smile: So I threw a version up there, and voila! The component renders and works fine.

Never thought I’d say it, but Microsoft for the win!!

2 Likes