Speech Recognition在Safari运行报错service-not-allowed问题咨询

首先明确：Safari对Speech Recognition的支持情况 #

Safari 14.1及以上版本的桌面端、iOS 14.5及以上版本的移动端均已支持SpeechRecognition接口，你看到的MDN两处说明不一致是因为通用支持指南更新滞后，仅标注了Chrome的全版本支持，而接口兼容性页面是按版本细分标注的，以接口兼容性页面的说明为准。

你遇到service-not-allowed错误的解决方案 #

第一步：先修复代码兼容问题 #

你当前的代码存在两处核心兼容错误：

1. 未处理浏览器前缀，且接口名拼写错误
   Chrome和Safari的语音识别接口均为大写开头，且Safari下需要加webkit前缀，修复后的完整代码如下：

// 先做兼容判断，适配不同浏览器
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
if (!SpeechRecognition) {
  $("#instructions").text("当前浏览器不支持语音识别功能")
}
var recognition = new SpeechRecognition()

var textBox = $("#textbox")
var instructions = $("#instructions")
var cont = ''

// 显式指定识别语言，避免Safari用系统默认语言出错
recognition.lang = 'zh-CN'
// Safari对continuous连续模式支持不稳定，测试阶段建议先设为false
recognition.continuous = false
recognition.interimResults = false

// Recognition started
recognition.onstart = function () {
    instructions.text("Voice recognition is on")
}

recognition.onspeechend = function () {
    instructions.text("No speech detected")
    // 若需要连续识别，可以在语音结束后重新调用start实现
    // recognition.start()
}

recognition.onerror = function (event) {
    instructions.text('Speech recognition error detected: ' + event.error)
}

recognition.onresult = function (event) {
    var current =  event.resultIndex;
    var transcript = event.results[current][0].transcript;

    cont += transcript
    textBox.val(cont)
}

$("#start-btn").click(function (event) {
    if(cont.length){
        cont += ''
    }
    recognition.start()
})

2. 未满足Safari的调用环境要求
   语音识别功能必须在HTTPS环境下运行，本地开发用localhost可豁免，线上部署必须走HTTPS，HTTP域名下Safari会直接拒绝服务。

第二步：修改系统与Safari权限设置 #

你只开了麦克风权限不够，还要单独开启语音识别权限：

Mac端操作步骤：

• 打开系统设置>隐私与安全性>语音识别，解锁左下角权限锁后，勾选列表中的Safari选项，修改后重启Safari
• 打开Safari设置>网站>麦克风，确认你的站点权限设置为「允许」
• 打开Safari设置>高级，勾选底部的「显示开发菜单」，随后在顶部菜单栏的「开发」>「实验性功能」中确认「SpeechRecognition」选项处于开启状态（旧版本Safari该功能默认关闭）

iOS端操作步骤：

• 打开系统设置>隐私与安全性>语音识别，开启Safari的权限开关
• 打开系统设置>Safari浏览器>高级>实验性功能，确认「SpeechRecognition」开关开启
• 访问站点时，弹出的语音识别权限申请选择「允许」

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