# Challenge capturing voice from node red dashboard

**URL:** <https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493>\
**Category:** Dashboard\
**Created:** [17 January 2020 10:41 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493 "2020-01-17T10:41:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dipak.talele](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dipak.talele](https://discourse.nodered.org/u/dipak.talele)\
**Post date:** [17 January 2020 10:41 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/1 "2020-01-17T10:41:00Z")

</div>

Hi,  
I am new to use Node Red. I am working on a project which uses a Node Red installed on local. I was able to code several flows successfully.  
One part of the project is to create a Node red dashboard, launch Mic on it and then captures the voice on the Mic and then pass it on to the node red speech to text node to covert the voice into text.

To bring the Mic on the dashboard browser I tried to use ui-template with some code of java script on that. By this, I was able to launch the Mic(node-red-contrib-browser-utils) on the browser. But the challenge I am facing is, when I speak on the Mic, I am not able to capture the voice and pass it to the speech to text node.

I also tried to refer the forums and tried to use node-red-contrib-mic which crashes when used.  
can you please provide your suggestions on how can we capture voice from red node dashboard and pass it to the speech to text node?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [17 January 2020 17:13 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/2 "2020-01-17T17:13:51Z")

</div>

Here's a ui\_template I made a while ago, havn't tested recently, so not sure if it still works. it uses Web Speech API which I think only works in Chrome and requires internet connection to do the speech to text bit. Let me know if it works for you:

```auto
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
    <button ng-model="myValue" onclick="analyse()"><font size="12px" id="buttontext">Speak</font> <img alt="Start" id="start_img" style="height:42px; width:42px" src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/512/Microphone-icon.png"></button>
    <textarea ng-show="0" id="p1" ng-model="myValue" ng-change="speak()">test</textarea>
    <p id="p2"></p>

<script>

var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;

recognition.onresult = function(event) {
  console.log(event.results)
  var results = "";
  for (var i = 0; i < event.results.length; i++){
      results = results + event.results[i][0].transcript;
  }
  //console.log(results)
  document.getElementById("p1").innerHTML = results;
  document.getElementById("p2").innerHTML = results;
 // $("#p1").trigger("blur")
  angular.element(document.getElementById('p1')).scope().speak('test');
}

function analyse(){
    document.getElementById("buttontext").innerHTML = "recording";
    recognition.stop();
    recognition.start();
}   

(function($scope) {
    $scope.speak = function() {
        document.getElementById("buttontext").innerHTML = "speak";
        var text = document.getElementById("p1").innerHTML;
        $scope.send({payload: text});
    }
})(scope);

  recognition.onstart = function() {
    recognizing = true;
    start_img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/06/Mic-Animation.gif';
  };

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'https://i.ytimg.com/vi/9YQU797Oy0Y/hqdefault.jpg';
    }
    if (event.error == 'audio-capture') {
      start_img.src = 'https://i.ytimg.com/vi/9YQU797Oy0Y/hqdefault.jpg';
      showInfo('info_no_microphone');
    }
  };

  recognition.onend = function() {
    start_img.src = 'http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/512/Microphone-icon.png';
}

</script>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 January 2020 17:45 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/3 "2020-01-17T17:45:01Z")

</div>

There are a couple of older threads that touch on this. They may be of help:

> [@Microphone access from Dashboard](https://discourse.nodered.org/t/microphone-access-from-dashboard/3746/2):
>
> 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.

> [@Override Trigger-Button](https://discourse.nodered.org/t/override-trigger-button/642):
>
> Hi there, is there a possibility to trigger a trigger-button (e.g. “Inject”-node, …) from extern? Via http/mqtt/flow-variable/… I agree, everyone should reword his flow to trigger an event on specific time, instead of such goofiness, but my used node (node-red-contrib-browser-utils/microphone) just provide such an trigger-button at node, instead of an input to trigger it via button or else. To modify the .html of this node gave me no luck.

---

<div class="post-metadata">

**Author:** ![subhasishsarkar](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@subhasishsarkar](https://discourse.nodered.org/u/subhasishsarkar)\
**Post date:** [19 January 2020 20:49 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/4 "2020-01-19T20:49:18Z")

</div>

Thanks a ton, @hugobox. Your code does work and did help us achieve what we wanted to (of course, had to tweak your code as necessary and that is ok and expected - we just wanted some sort of guidance and we got that).

By the way, I am @dipak.talele 's colleague and we are working together on the project regarding which we sought guidance in the forum.

---

<div class="post-metadata">

**Author:** ![dipak.talele](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dipak.talele](https://discourse.nodered.org/u/dipak.talele)\
**Post date:** [20 January 2020 04:33 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/5 "2020-01-20T04:33:59Z")

</div>

Thank you all for your suggestions.  
@hugobox Thanks for the code. It worked for us.

Looking forward to be active member of this forum as we try more and more with node red 🙂

---

<div class="post-metadata">

**Author:** ![israxeldom](https://avatars.discourse-cdn.com/v4/letter/i/da6949/32.png) [@israxeldom](https://discourse.nodered.org/u/israxeldom)\
**Post date:** [13 April 2021 18:59 UTC](https://discourse.nodered.org/t/challenge-capturing-voice-from-node-red-dashboard/20493/6 "2021-04-13T18:59:17Z")

</div>

Good afternoon I have a little problem when executing the template and talking I get an error in the following line:

angular.element(document.getElementById('p1')).scope().speak('test');

 ![173487321_524549368566899_5433662217693848337_n](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42585dcc929b18768561a7e44d750dda62560d39.png)

I have already looked and tried different things but nothing works for me I hope you can help me friends
