webkitSpeechRecognition每次调用重复请求麦克风权限问题咨询

你的猜测是对的，反复弹出权限申请的核心原因就是直接用file://协议从本地文件夹打开页面导致的。

1. 部署到服务器可解决该问题，但要满足协议要求 #

浏览器对file://协议的站点有严格的安全限制，不会持久化存储麦克风等敏感权限的授权结果，所以每次调用webkitSpeechRecognition都会重新触发权限申请。
你把页面部署到HTTPS协议的公网服务器后，用户第一次完成麦克风授权，只要不手动清除该站点的权限配置，后续调用语音识别接口就不会再弹出权限申请窗口了。
如果公网部署用普通HTTP协议的话，还是会触发和本地file协议一样的权限逻辑，无法持久化保存授权结果。

2. 本地调试免反复授权方案 #

如果只是本地开发调试，不需要部署到公网，你可以用本地静态服务器启动页面，走localhost域名访问：

• Windows/macOS都可以直接用Python自带的工具，在代码文件所在目录打开终端，执行命令：

  # Python 3
  python3 -m http.server 8000
  # Python 2
  python -m SimpleHTTPServer 8000
  

• 执行后在浏览器打开http://localhost:8000访问页面，首次授权之后后续调用就不会重复弹权限窗口了。

3. 可选代码优化 #

你当前的代码没有加识别状态判断，重复点击按钮多次调用recognition.start()可能会触发异常，可新增状态控制逻辑：

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
// 新增识别状态标记
let isRecognizing = false;

recognition.onstart = function() {
  isRecognizing = true;
  document.getElementById("a").innerHTML = "<b>!</b>"
};

recognition.onspeechend = function() {
  recognition.stop();
}

// 新增识别结束回调，重置状态
recognition.onend = function() {
  isRecognizing = false;
}

recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  process(transcript, "a");
  var confidence = event.results[0][0].confidence;
};

function sListening() {
  // 只有非识别状态下才启动识别
  if (!isRecognizing) {
    recognition.start();
  }
}

// 其余原有代码保持不变即可

内容的提问来源于stack exchange，提问作者unp1ng46l3