Question

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

另一方面，我会在中将<spans>的每个单词分开，因为我认为我必须做出像＃34;当你听到1，您等着2＆＃34;等等... 但就目前而言，我制作了一份清单而不是跨度，就像那样：

<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>不好，当我用或其他任何内容填写时，它是一样的方法吗？

Answer 1

您在myFunction内添加对recognition.onresult的调用，您还修改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是更好的名称。

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

1 个答案: