javascript - 使用 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](如果存在)。