使用Javascript/Speech recognition/tampermonkey单击按钮

目前，我可以使用运行在tampermonkey中的Javascript单击HTML中的4个按钮中的任意一个，以选择要单击的按钮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> 

document.getElementById（'radio0'）。单击（）；
没有一个
一个
两个
三+

您可以通过使用从语音到文本的输入检查div的innerHTML来选择div。要匹配元素，您可以使用此链接的答案

生成一个按钮名称数组。因为

SpeechRecognition

将数字识别为实际数字（例如

1

，而不是

1

），所以使用数值而不是它们的文字表示

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

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

当触发

onresult

处理程序时（当您停止说话时），识别成绩单中的最后一个单词，并查看它是否与任何

按钮名称相匹配。如果是，请选择文档中的所有按钮，然后单击相应的按钮索引

// ==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);
}

/==UserScript==
//@name Userscript语音识别
//@namespace-CertainPerformance
//@version 1
//@匹配https://stackoverflow.com/questions/51702275/click-button-using-javascript-speech-recognition-tampermonkey
//@grant none
//==/UserScript==
document.head.innerHTML=''；
document.body.innerHTML=`
没有一个
一个
两个
三+
`;
document.addEventListener（'click'，（{target}）=>{
如果（！target.matches（'button'））返回；
log（'Click-detected:'+target.outerHTML）；
});
var SpeechRecognition=SpeechRecognition | | webkitSpeechRecognition
var SpeechGrammarList=SpeechGrammarList | | webkit SpeechGrammarList
var SpeechRecognitionEvent=SpeechRecognitionEvent | | webkitSpeechRecognitionEvent
变量buttonNames=['None'，'1'，'2'，'3']；
var recognition=新的SpeechRecognition（）；
document.body.onclick=函数（e）{
if（如target.matches（'button'））返回；
识别。开始（）；
console.log（'listing'）；
}
recognition.onresult=函数（事件）{
var last=event.results.length-1；
var speechText=event.results[last][0]。记录本；
console.log（'Heard'+speechText）；
const foundButtonIndex=buttonNames.findIndex（buttonName=>buttonName==speechText）；
控制台日志（foundButtonIndex）；
如果（foundButtonIndex！=-1）document.querySelectorAll（'button'）[foundButtonIndex]。单击（）；
}
recognition.onspeechend=函数（）{
识别。停止（）；
}
recognition.onnomatch=功能（事件）{
console.log（'无法识别'）
}
recognition.onerror=功能（事件）{
console.log（'Error'+event.Error）；
}

对于一个更通用的解决方案，当按钮中可以包含任何文本，并且您希望能够说出按钮文本并单击相应的按钮时，您可以
querySelectorAll
pageload上的所有按钮，将它们映射到一个对象，并使用与其文本内容对应的键，然后单击
buttonObj[speechText]
如果存在的话。
mehn您似乎已经解决了所有问题，谢谢。我需要时间来检查你的代码。我会在几个小时后给你回复。谢谢