# Microphone access from Dashboard

**URL:** <https://discourse.nodered.org/t/microphone-access-from-dashboard/3746>\
**Category:** Dashboard\
**Created:** [6 October 2018 21:04 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746 "2018-10-06T21:04:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sandra/32/3010_2.png) [@sandra](https://discourse.nodered.org/u/sandra)\
**Post date:** [6 October 2018 21:04 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/1 "2018-10-06T21:04:20Z")

</div>

I am creating a chatbot and I want to be able to talk to the chatbot through the dashboard.

I have tried the microphone node with the utils package and then using STT my bot understand the message perfectly but I need to start the recording from the node red canvas... I want to be able to click a button on my dashboard to talk to the bot.

Is this possible?  
Thanks

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 October 2018 01:00 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/2 "2018-10-07T01:00:26Z")

</div>

Hi Sandra,

You didn't say which microphone node you are using, so I went looking for what is available in the flows library... it looks like the [node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils) provides a dashboard widget the start/stop button built-in:

> Microphone
> 
> The browser starts recording after the button next to the node is clicked and stops it when the button is clicked again. The node outputs it as a WAV buffer.

---

<div class="post-metadata">

**Author:** ![sandra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sandra/32/3010_2.png) [@sandra](https://discourse.nodered.org/u/sandra)\
**Post date:** [7 October 2018 18:29 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/3 "2018-10-07T18:29:20Z")

</div>

Hi!

I am using the node-red-contrib-browser-utils package for the microphone.

The problem is I need to start recording from the node red editor. I want to do it from the dashboard.  
This flow works, but I want to add a button on my dashboard to start and stop the recording.

 ![08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b658c9d72253c54a8d55a41f68e6f58f6557de3c.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 October 2018 23:29 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/4 "2018-10-07T23:29:59Z")

</div>

If you look at [node-red-contrib-mic](https://flows.nodered.org/node/node-red-contrib-mic) you will see you can send an action to it to start/stop recording. So you could have a button on the dashboard connected to a chage node that would set the action which is connected to the node.

---

<div class="post-metadata">

**Author:** ![sandra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sandra/32/3010_2.png) [@sandra](https://discourse.nodered.org/u/sandra)\
**Post date:** [8 October 2018 08:32 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/5 "2018-10-08T08:32:23Z")

</div>

That works in my local node red. I did have to install sox in my Mac otherwise it kept crashing.

How do I make it run on the cloud?  
I am using IBM Cloud Node-red boilerplate and when I click on start my app crashes ☹

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 October 2018 08:40 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/6 "2018-10-08T08:40:33Z")

</div>

Let's clarify where these various nodes capture their audio.

`node-red-contrib-mic` can be used to access the microphone on the device running Node-RED - the audio capture happens in the runtime. That isn't going to work when running in the cloud.

`node-red-contrib-browser-utils` provides a node that lets you capture audio from the microphone on the device running the browser you have opened the node-red editor in.

Neither of these nodes can be used to capture audio from a `node-red-dashboard` ui. To do that, you'd need to use a `ui_template` node to insert some custom javascript that can be used to do the audio capture when triggered. I'm sure _someone_ must have done that - but I can't find an example at the moment.

Capturing audio in the browser is a bit fiddly, but very doable. You could use the `browser-utils` node as a guide for what you'd need to do - [https://github.com/ibm-early-programs/node-red-contrib-browser-utils/blob/master/microphone/microphone.html](https://github.com/ibm-early-programs/node-red-contrib-browser-utils/blob/master/microphone/microphone.html)

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [8 February 2020 21:37 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/7 "2020-02-08T21:37:29Z")

</div>

Bump on this topic. I am at a hackathon this weekend and the team wants to build a Node-RED Dashboard which records audio in the browser using the microphone. They don't have the programming skills to implement what Nick outlined. Would be helpful to have this capability.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [9 February 2020 08:12 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/8 "2020-02-09T08:12:18Z")

</div>

To start reading [https://developer.mozilla.org/en-US/docs/Web/API/MediaStream\_Recording\_API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) and [https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)  
And if that sounds as too much to understand to cancel the idea as you simply won’t manage to get through it in the time of a hackathon.

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [31 March 2020 04:09 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/9 "2020-03-31T04:09:03Z")

</div>

Nick did some great work on node-red-node-ui-microphone so you can now have a Node-RED Dashboard that records speech. It's straightforward to wire the new microphone node to the Watson Speech to Text node.

> **[node-red-node-ui-microphone](https://flows.nodered.org/node/node-red-node-ui-microphone)**
>
> A Node-RED ui node to record audio on a dashboard.

---

<div class="post-metadata">

**Author:** ![shubham-root](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shubham-root/32/19422_2.png) [@shubham-root](https://discourse.nodered.org/u/shubham-root)\
**Post date:** [17 April 2020 19:31 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/10 "2020-04-17T19:31:47Z")

</div>

I have been trying to get node-red-node-ui-microphone for sometime now today, but have not been able to get it to work. As in Microphone node is not being recognized by the dashboard and default dashboard page shows up on /ui if deployed with just the microphone node on editor.

Is there an example in how to use this?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [18 April 2020 07:54 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/11 "2020-04-18T07:54:11Z")

</div>

Are you using the latest version of node-red-dashboard (2.20.0 I think)? If not then try updating to that. Otherwise stop and restart node red in a terminal and copy/paste the log here (after deploying the node). Depending on your installation the easiest way to do that is to run  
`node-red-stop`  
`node-red-start`

---

<div class="post-metadata">

**Author:** ![shubham-root](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shubham-root/32/19422_2.png) [@shubham-root](https://discourse.nodered.org/u/shubham-root)\
**Post date:** [18 April 2020 11:45 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/12 "2020-04-18T11:45:31Z")

</div>

Thank you Colin it seems like indeed version was the issue. It works on bumping up the Node Red dashboard version to 2.20.0.

---

<div class="post-metadata">

**Author:** ![Zbrooklyn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zbrooklyn/32/34446_2.png) [@Zbrooklyn](https://discourse.nodered.org/u/Zbrooklyn)\
**Post date:** [29 December 2020 02:55 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/13 "2020-12-29T02:55:51Z")

</div>

im using

node-red-dashboard 2.26.0

and its not showing up in my dashboard  
@Colin

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [29 December 2020 10:33 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/14 "2020-12-29T10:33:57Z")

</div>

Welcome to the forum.!

1. What version of Node-red and node.js are you using? (see the node-RED startup log)
2. What platform are you running on? (Rpi, Mac, PC)
3. What browser are you using?
4. Did you try flushing your cache?

Can you provide a copy of your flow?

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [29 December 2020 10:51 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/15 "2020-12-29T10:51:50Z")

</div>

If you are accessing the dashboard from any machine other than the one running it than the ui mic will only work if you enable https for the dashboard.  
If on an iphone you will also have to go into the further safari settings in the settings app and enable the media-recorder in the experimental section.  
Just two things to check depending on your set up.

Johannes

---

<div class="post-metadata">

**Author:** ![Zbrooklyn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zbrooklyn/32/34446_2.png) [@Zbrooklyn](https://discourse.nodered.org/u/Zbrooklyn)\
**Post date:** [30 December 2020 01:01 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/16 "2020-12-30T01:01:06Z")

</div>

i am using the ibm cloude option it works on node red on the computer but not in the cloude server

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [30 December 2020 01:33 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/17 "2020-12-30T01:33:52Z")

</div>

so are you saying that the dashboard does not showup when running node-red on the IBM cloud server? Or are you saying you can't get the microphone to work when running on the IBM cloud server?

---

<div class="post-metadata">

**Author:** ![Zbrooklyn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zbrooklyn/32/34446_2.png) [@Zbrooklyn](https://discourse.nodered.org/u/Zbrooklyn)\
**Post date:** [30 December 2020 04:56 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/18 "2020-12-30T04:56:20Z")

</div>

the microphone button does not show up on the dashboard when I use IBM cloud

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 December 2020 07:26 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/19 "2020-12-30T07:26:10Z")

</div>

Which microphone node are you trying to use?

---

<div class="post-metadata">

**Author:** ![Zbrooklyn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zbrooklyn/32/34446_2.png) [@Zbrooklyn](https://discourse.nodered.org/u/Zbrooklyn)\
**Post date:** [30 December 2020 19:35 UTC](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/20 "2020-12-30T19:35:02Z")

</div>

node-red-node-ui-microphone

[Next page](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746.md?page=2)