如何在 HTML5 网络语音 API 中使用多按钮识别器

Question

我正在研究识别用户语音音素然后检查单词是真还是假的教育网站

我的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>

我的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 = '';
}

我可以输入语音但是final_span不会产生结果...

我希望当我单击 'Rose' 识别器时，玫瑰行的 final_span 会产生结果。与 'Risiko' 识别器相同..

我必须做什么？

Answer 1

您有两个元素的 ID final_span。我想你想用不同的方式命名它们，比如 final_span1 和 final_span2。

此外，当识别处于活动状态时不需要 return，我怀疑这不是预期的行为

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

如何在 HTML5 网络语音 API 中使用多按钮识别器

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

html

javascript

speech-recognition

webspeech-api