首页 文章

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

提问于
浏览 次
0

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

在另一方面，我正在把 <p> 中的每个单词分别在 <spans> 中分开，因为我想我必须做出类似“当你听到 <span>1</span> 时，你等着听 <span>2</span> ”等等......但是对于那一刻，我正在制作一份清单而不是 Span ，就像那样：

<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";
    }
  }
}

然后，我第二次尝试将其与speechRecognition输入合并，但没有成功：

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

我做了fiddle，我现在将两个功能分开，因为我没找到任何东西......

但是，我是否会以良好的方式进行...我必须管理长文本并且 <li> 不好，当我用 <span> 或其他任何东西制作它时，它会是同样的方法吗？

javascript html speech-recognition speech-to-text speech

1 回答

  • 0

    你在 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 是更好的名字 .

    回复于

相关问题