如何使用语音识别结果过滤/搜索元素答案

【问题标题】：How to use speech recognition results to filter/search element如何使用语音识别结果过滤/搜索元素
【发布时间】：2018-02-24 15:52:18
【问题描述】：

我正在尝试制作一个朗读网站，其中包含我们只能朗读的长文本，而没有任何可能的滚动。但是我对纯 JS 不是很擅长，而且我有点迷茫。我尝试了语音识别，并第二次制作了过滤器/搜索列表。

另一方面，我将 中的每个单词在<spans> 中分开，因为我想我必须做出类似“当你听到1，你等着听到2”等等...... 但就目前而言，我正在制作一个列表而不是跨度，就像那样：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Say something..." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Hello world</a></li>
  <li><a href="#">Bye world</a></li>
  <li><a href="#">See you world</a></li>
</ul>

还有 JS：

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

然后，我第二次尝试将它与语音识别输入合并，但没有成功：

<form>
  <input type="button" id="btn" value="start" />
</form>
<div id="interimResult"></div>
<div id="finalResult">Let speak</div>

我做了一个fiddle，现在我将这两个函数分开，因为我没有找到任何东西......

但是，我会走好路吗...我必须管理长文本并且<li> 不好，当我将使用 或其他任何东西时，它会是相同的方法吗？

【问题讨论】：

标签： javascript html speech-recognition speech-to-text speech

【解决方案1】：

您在recognition.onresult 中添加对myFunction 的调用，还修改myFunction 以接受已识别的文本作为参数，它就可以完成这项工作：

function myFunction(filter) { // HERE WE TAKE FILTER AS AN ARGUMENT
  var ul, li, a, i;
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}


recognition.onresult = function(event) {
  var interimTranscript = "";
  for (var i = event.resultIndex; i < event.results.length; i++) {
    var _transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      finalTranscript = StringUtils.capitalize(_transcript);
      myFunction(finalTranscript); // <-- HERE IT FILTERS 
                                   // USING SPEECH RECOGNITION RESULT
    }

最好给你的函数myFunction 起一个更有意义的名字，例如filterView 是更好的名字。

【讨论】：