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

Question

目前，我可以单击 HTML 中的 4 个按钮中的任何一个，使用在 tampermonkey 中运行的 Javascript 来选择要单击的按钮 DIV 的 ID。但是，我想通过说出以下任何单词（无、一、二、三）来使用语音识别来单击 4 个按钮中的任何一个。我猜测语音脚本会改变我所说的文本，文本将被添加到一个 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。单击文档正文，将开始识别。 （打开浏览器的控制台，看看它在做什么）然后，说出其中一个按钮的名称。 （确保 Stack Overflow - 或您在其上运行用户脚本的任何域 - 有权收听您的麦克风）

当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