Question

当前，我可以使用运行在tampermonkey中的Javascript单击HTML中的4个按钮中的任何一个，以选择要单击的按钮DIV的ID。但是，我想使用语音识别通过说出以下任何一个单词（无，一个，两个，三个）来单击4个按钮中的任何一个。我猜想语音脚本会将我所说的单词更改为文本，然后将其添加到javascript数组中，该javascript数组将与要单击的DIV ID匹配。如何使用javascript实现此目的。谢谢

  document.getElementById('radio0').click();

    <div class="radio-container">
     <div class="col-6">
      <button id="radio0">None</button>
     </div>
    <div class="col-6">
     <button id="radio1">One</button>
    </div>
    <div class="col-6">
     <button id="radio2">Two</button>
    </div>
    <div class="col-6">
     <button id="radio3">Three +</button>
    </div>
  </div>

Answer 1

出现一系列按钮名称。因为SpeechRecognition将数字识别为实际数字（例如1，而不是one），所以请使用数字值而不是它们的单词表示形式。

var buttonNames = [ 'None', '1', '2', '3'];

我在授予嵌入式StackSnippet访问麦克风的权限时遇到了麻烦（可能与跨域和沙箱规则有关），因此我将所有代码都放在了用户脚本中。它用您的HTML替换页面的HTML。单击文档正文，识别将开始。（打开浏览器的控制台以查看其功能），然后说出其中一个按钮名称。（确保堆栈溢出-或运行用户脚本的任何域-都有权收听您的麦克风）

触发onresult处理程序时（当您停止说话时），请确定成绩单中的最后一个单词，并查看其是否与任何buttonNames相匹配。如果是这样，请querySelectorAll文档中的按钮，并.click()相应的按钮索引。

// ==UserScript==
// @name         Userscript Speech Recognition
// @namespace    CertainPerformance
// @version      1
// @match        https://stackoverflow.com/questions/51702275/click-button-using-javascript-speech-recognition-tampermonkey
// @grant        none
// ==/UserScript==

document.head.innerHTML = '';
document.body.innerHTML = `
    <div class="radio-container" style="height:1000px">
         <div class="col-6">
          <button id="radio0">None</button>
         </div>
        <div class="col-6">
         <button id="radio1">One</button>
        </div>
        <div class="col-6">
         <button id="radio2">Two</button>
        </div>
        <div class="col-6">
         <button id="radio3">Three +</button>
        </div>
      </div>
`;

document.addEventListener('click', ({ target }) => {
  if (!target.matches('button')) return;
  console.log('Click detected: ' + target.outerHTML);
});
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent


var buttonNames = [ 'None', '1', '2', '3'];

var recognition = new SpeechRecognition();

document.body.onclick = function(e) {
  if (e.target.matches('button')) return;
  recognition.start();
  console.log('Listening');
}

recognition.onresult = function(event) {
  var last = event.results.length - 1;
  var speechText = event.results[last][0].transcript;
  console.log('Heard ' + speechText);
  const foundButtonIndex = buttonNames.findIndex(buttonName => buttonName === speechText);
  console.log(foundButtonIndex);
  if (foundButtonIndex !== -1) document.querySelectorAll('button')[foundButtonIndex].click();
}

recognition.onspeechend = function() {
  recognition.stop();
}

recognition.onnomatch = function(event) {
  console.log('Not recognized')
}

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

对于更通用的解决方案，当按钮内部可以包含任何文本，并且您希望能够说出按钮文本并单击适当的按钮时，可以querySelectorAll加载页面上的所有按钮，并将其映射到具有与文本内容相对应的键的对象，然后单击buttonObj[speechText]（如果存在）。

Answer 2

您可以通过使用从语音到文本得到的输入来检查div的innerHTML来选择div。要匹配元素，您可以使用此链接Javascript .querySelector find <div> by innerTEXT

中的答案

单击使用Javascript /语音识别/ tampermonkey的按钮

2 个答案: