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

Question

目前，我可以点击 HTML 中的 4 个按钮中的任何一个，在 tampermonkey 中使用 Javascript 运行，select 按钮的 ID DIV 点击。但是我想使用语音识别通过说出以下任何单词来单击 4 个按钮中的任何一个，NONE、一、二、三。我猜测语音脚本会将我说的单词更改为将添加到 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

您可以 select div 通过检查 div 的 innerHTML 和从语音到文本的输入。要匹配该元素，您可以使用此 link

中的答案

Answer 2

想出一组按钮名称。因为 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        
// @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]（如果存在）。

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

Click button using Javascript / Speech recognition /tampermonkey

html

javascript

speech-recognition

tampermonkey