Javascript Android Chrome中Web语音API的问题_Javascript_Android_Google Chrome_Webspeech Api_Webkitspeechrecognition

Javascript Android Chrome中Web语音API的问题

javascript android google-chrome

Javascript Android Chrome中Web语音API的问题,javascript,android,google-chrome,webspeech-api,webkitspeechrecognition,Javascript,Android,Google Chrome,Webspeech Api,Webkitspeechrecognition,我正在尝试使用的接口。它在桌面版Chrome上运行良好，但在Android版上我无法检测到任何音频。在我自己的代码无法运行之后，我在两个不同的Android设备上进行了测试（一个运行Riegeos Nougat，一个运行Riegeos Pie，都使用Chrome 79），但两个演示都无法在这两个设备上运行我不确定这里出了什么问题。。。其他人能在Android上运行这些演示吗？我通过https为我的测试页面提供服务，我可以在这些设备上录制microhpone的音频，使用起来很好，所以这似乎不是硬

我正在尝试使用的接口。它在桌面版Chrome上运行良好，但在Android版上我无法检测到任何音频。在我自己的代码无法运行之后，我在两个不同的Android设备上进行了测试（一个运行Riegeos Nougat，一个运行Riegeos Pie，都使用Chrome 79），但两个演示都无法在这两个设备上运行

我不确定这里出了什么问题。。。其他人能在Android上运行这些演示吗？我通过https为我的测试页面提供服务，我可以在这些设备上录制microhpone的音频，使用起来很好，所以这似乎不是硬件、权限或安全问题

我看到的具体症状如下：

该事件在最初按预期启动识别后激发，但随后的、、和事件不会激发
尝试调用似乎没有效果-事件不会被触发。停止尝试后调用抛出未捕获的DomeException:未能对“SpeechRecognition”执行“start”：识别已开始。
调用会触发
```
end
```
事件并允许重新启动识别

下面是一些基于的测试代码


网络语音API测试
*{框大小：边框框；}
html{
身高：100%；
宽度：100%；
}
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
显示：网格；
网格模板列：1fr；
网格模板行：1fr 10fr 1fr；
字体系列：无衬线；
}
h1{
保证金：0；
填充：0.5雷姆；
背景色：淡蓝色；
文本对齐：居中；
}
#输出{
保证金：0；
填充：0.5em；
边界：0；
背景色：透明；
}
#开始{
显示：块；
背景色：淡蓝色；
边界：0；
颜色：海军蓝；
字体大小：粗体；
字体大小：1.2米；
}
网络语音API测试
开始
让SpeechRecognition=window.SpeechRecognition | | window.webkitSpeechRecognition；
让SpeechGrammarList=window.SpeechGrammarList | | window.webkitSpeechGrammarList；
让SpeechRecognitionEvent=window.SpeechRecognitionEvent | | window.webkitSpeechRecognitionEvent；
让语法='#JSGF V1.0；语法色彩；（12）公共公共部门：AA级（12）AA级（12）A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：A级：124;红|鲑鱼|锡耶纳|银|雪|棕|青色|蓟色|番茄色|青绿色|紫罗兰色|白色|黄色|；
let recognition=新的SpeechRecognition（）；
让speechRecognitionList=new SpeechGrammarList（）；
speechRecognitionList.addFromString（语法，1）；
recognition.grammars=speechRecognitionList；
识别持续=错误；
recognition.lang='en-US'；
recognition.interimResults=false；
识别率=1；
让startButton=document.getElementById（'start'）；
让output=document.getElementById（'output'）；
output.value+=“初始化…”；
让倾听=虚假；
startButton.addEventListener（'单击'，事件=>{
如果（侦听==false）{
识别。开始（）；
startButton.innerHTML='STOP'；
倾听=真实；
}否则{
//识别。停止（）；
识别。中止（）；
}
});
console.dir（识别）；
output.value+=“准备就绪”；
recognition.onstart=事件=>{
output.value+='\n已开始识别'；
};
recognition.onaudiostart=事件=>{
output.value+='\nAudio start'；
};
recognition.onsoundstart=事件=>{
output.value+='\n声音开始'；
};
recognition.onspeechstart=事件=>{
output.value+='\n搜索已启动'；
};
recognition.onspeechend=事件=>{
output.value+='\n查看结束'；
识别。停止（）；
};
recognition.onsoundend=事件=>{
output.value+='\n声音结束'；
};
recognition.onaudioend=事件=>{
output.value+='\nAudio end'；
};
recognition.onend=事件=>{
output.value+='\n认知停止'；
startButton.innerHTML='START'；
倾听=错误；
};
recognition.onresult=事件=>{
让color=event.results[0][0]。转录本；
设置信度=事件。结果[0][0]。置信度；
document.body.style.backgroundColor=颜色；
output.value+='\n收到的结果：'+颜色；
output.value+='\n置信度：'+置信度；
};
recognition.onnomatch=事件=>{
output.value+='\n未识别颜色'；
};
recognition.onerror=事件=>{
output.value+='\n错误：'+event.error；
};

任何关于问题可能是什么的想法都将不胜感激

更新2021-01-08:

我修改了示例代码，使其将日志消息输出到

textarea

元素，而不是控制台，以消除远程调试的需要。我还在我的域名上发表了一篇文章。然后我用ChromeCanary89在RigeneosOreo上测试了它，发现它仍然不起作用。然而，我后来发现，这个例子在运行Android Pie和Chrome87的官方版本的Razer手机上运行得非常好！因此，我的WebSpeech实现似乎很好，并且可能存在多个版本的沿袭操作系统的其他一些问题

这个问题已得到解答

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Web Speech API Test </title>
    <style>
      * { box-sizing: border-box; }

      html {
        height: 100%;
        width: 100%;
      }

      body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 10fr 1fr;
        font-family: sans-serif;
      }

      h1 {
        margin: 0;
        padding: 0.5rem;
        background-color: dodgerblue;
        text-align: center;
      }

      #output {
        margin: 0;
        padding: 0.5em;
        border: 0;
        background-color: transparent;
      }

      #start {
        display: block;
        background-color: dodgerblue;
        border: 0;
        color: navy;
        font-weight: bold;
        font-size: 1.2em;
      }
    </style>
  </head>
  <body>
    <h1> Web Speech API Test </h1>
    <textarea id="output"></textarea>
    <button id="start"> START </button>
    <script>
      let SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      let SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
      let SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;

      let grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;';

      let recognition = new SpeechRecognition();
      let speechRecognitionList = new SpeechGrammarList();
      speechRecognitionList.addFromString(grammar, 1);

      recognition.grammars = speechRecognitionList;
      recognition.continuous = false;
      recognition.lang = 'en-US';
      recognition.interimResults = false;
      recognition.maxAlternatives = 1;

      let startButton = document.getElementById('start');
      let output = document.getElementById('output');
      output.value += 'Initializing...';

      let listening = false;

      startButton.addEventListener('click', event => {
        if (listening == false) {
          recognition.start();
          startButton.innerHTML = 'STOP';
          listening = true;
        } else {
      //    recognition.stop();
          recognition.abort();
        }
      });

      console.dir(recognition);
      output.value += 'ready.';

      recognition.onstart = event => {
        output.value += '\nRecognition started';
      };

      recognition.onaudiostart = event => {
        output.value += '\nAudio started';
      };

      recognition.onsoundstart = event => {
        output.value += '\nSound started';
      };

      recognition.onspeechstart = event => {
        output.value += '\nSpeech started';
      };

      recognition.onspeechend = event => {
        output.value += '\nSpeech ended';
        recognition.stop();
      };

      recognition.onsoundend = event => {
        output.value += '\nSound ended';
      };

      recognition.onaudioend = event => {
        output.value += '\nAudio ended';
      };

      recognition.onend = event => {
        output.value += '\nRecognition stopped';
        startButton.innerHTML = 'START';
        listening = false;
      };

      recognition.onresult = event => {
        let color = event.results[0][0].transcript;
        let confidence = event.results[0][0].confidence;
        document.body.style.backgroundColor = color;
        output.value += '\nResult recieved: ' + color;
        output.value += '\nConfidence: ' + confidence;
      };

      recognition.onnomatch = event => {
        output.value += '\nColor not recognised';
      };

      recognition.onerror = event => {
        output.value += '\nERROR: ' + event.error;
      };
    </script>
  </body>
</html>

recognition.onspeechend = event => {
    console.log('speechend');
    recognition.stop();
    listening = false;
};