Challenge capturing voice from node red dashboard

Dashboard
1

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?

1 Like
2

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:

<!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>
2 Likes
3

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

1 Like
4

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.

2 Likes
5

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 :slight_smile:

2 Likes
6

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
173487321_524549368566899_5433662217693848337_n991Ă—112 4.55 KB

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