0

I am trying to build a web app that allows users to call each other. Currently, I am trying to implement a voice recognition feature that does the following:

The voice recognition starts when the call is connected. It recognizes and constantly populates a variable with the recognized text as the call progresses. When the call is terminated, return the variable containing the final transcribed text.

In one of my HTML files, I am calling two JS files in the following order:

  <script src="/resource/js/chat/call.js" defer></script>
  <script src="/resource/js/chat/voice_recognition.js" defer></script>

In voice_recognition.js, I have a voice recognition function that translates what a user speaks into text, and populates the text into the variable.

function start_transcript(variable_to_populate) {
  var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
  var recognition = new SpeechRecognition();

  recognition.onresult = function(event) {
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        variable_to_populate += event.results[i][0].transcript;               
      }
    }
  }
}

In the call.js function, I am using an API that could detect when a call is initiated and disconnected. I have the following codes inside call.js

var final_transcript = "";
device.on("connect", function(conn) {
  start_transcript(final_transcript);
})

device.on("disconnect", function(conn) {
  console.log(final_transcript);
})

But the final_transcript logged empty after call terminates even though there has been voice recognition going on. Is there anything wrong with my approach of declaring a global variable called final_transcript and passing to the voice_recognition function to populate the variable? Also, is there a better approach you can think of to solve this problem?

Yugue Chen
  • 79
  • 5
  • `variable_to_populate += ` always only modifies the local variable that your parameter `variable_to_populate` declared. The `final_transcript` is not passed by reference, it is never reassigned. You might try passing an array and mutating that, though. – Bergi Aug 01 '20 at 17:36

1 Answers1

0

Try and change the order in which you load the files first. call.js is dependant on the start_transcript function in the other file. Which is undefined atm.

  <script src="/resource/js/chat/voice_recognition.js" defer></script>
  <script src="/resource/js/chat/call.js" defer></script>

*edit

Also change .on to => .onresult. Tested in my browser and does not seem to be an 'on'-method.

device.onresult("connect", function(conn) {
  start_transcript(final_transcript);
})

device.onresult("disconnect", function(conn) {
  console.log(final_transcript);
})
jakob_a
  • 91
  • 1
  • 6