How to working with multiple button recognizer at HTML5 web speech API

Question

i'm working about education web that recognize the phonem of user voice then check whether the word is true or false

my HTML

<div id="results">      
    <table class="tg">
      <tr>
        <th class="tg-4bcc">German</th>
        <th class="tg-4bcc">English</th>
        <th class="tg-ii5f">Record</th>
        <th class="tg-ii5f">Result</th>
        <th class="tg-031e"></th>
      </tr>
      <tr>
        <td class="tg-iu59" id="word1">Rose</td>
        <td class="tg-zbsj">rose</td>
        <td class="tg-dilm"><a href="#" id="start_button" class="Rose"onclick="startDictation1(event, this.className)"><img id="start_img" src="mic.gif" alt="Start"></img></a></td>
        <td class="tg-hy62"><span id="final_span" class="final"></span></td>
        <td class="tg-031e"><span id="answer" class="answer"></span></td>
      </tr>
      <tr>
        <td class="tg-iu59" id="word2">Risiko</td>
        <td class="tg-zbsj">risk</td>
        <td class="tg-dilm"><a href="#" id="start_button" class="Risiko" onclick="startDictation2(event, this.className)"><img id="start_img" src="mic.gif" alt="Start"></img></a></td>
        <td class="tg-hy62"><span id="final_span" class="final"></span></td>
        <td class="tg-031e"><span id="answer" class="answer"></span></td>
      </tr>
    </table>

My javascript

var final_transcript = '';
var recognizing = false;

if ('webkitSpeechRecognition' in window) {
  var recognition = new webkitSpeechRecognition();
  recognition.lang = 'de-DE';
  recognition.continuous = false;
  recognition.interimResults = false;
  document.getElementById("answer").innerHTML = '';

  recognition.onstart = function() {
    recognizing = true;
  };

  recognition.onerror = function(event) {
    console.log(event.error);
  };

  recognition.onend = function() {
    recognizing = false;
  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    if(final_span.innerHTML == word){
        document.getElementById("answer").innerHTML = "Good day!";
    }
    else document.getElementById("answer").innerHTML = "oh no :(";
  };
}

var two_line = /\n\n/g;
var one_line = /\n/g;

function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}

function capitalize(s) {
  return s.replace(s.substr(0,1), function(m) { return m.toUpperCase(); });
}

function startDictation1(event,className) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  var word = className.value;
  final_transcript = '';
  recognition.start();
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
}

function startDictation2(event,className) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  var word = className.value;
  final_transcript = '';
  recognition.start();
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
}

i can input the voice but final_span won't produce the result...

i want when i'm click the 'Rose' recognizer, the final_span at rose row is produce the result.. same with 'Risiko' recognizer..

what must i do?

Answer 1

You have two elements both with id final_span. I suppose you want to name them differently like final_span1 and final_span2.

Also, there is no need to return when recognizing is active, I suspect it is not expected behaviour

  if (recognizing) {
    recognition.stop();
    return; // You can remove return here and just proceed
  }