Web Speech Recognition API初始化异常及onresult回调无法触发问题求助

阿华AIGC实验室

2026-4-13

各位大佬好，我最近在做一个基于Web Speech Recognition API的语音输入功能，但遇到了个头疼的问题——recognition.onresult这个回调函数完全没被触发，控制台里看不到对应的日志，输入框里也没有识别出的文本。我先把完整代码贴出来，麻烦大家帮我看看哪里出问题了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speech Recognition</title>
</head>
<body>

    <input type="text" id="sendInput" placeholder="Recognized text will appear here">
    <button id="speechButton">Hold to Speak</button>

    <script>
        let recognition;
        let isListening = false;

        function initSpeechRecognition() {
          navigator.permissions.query({ name: "microphone" }).then((result) => {
  console.log("Microphone Permission:", result.state);
});
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SpeechRecognition) {
                alert("Your browser does not support Speech Recognition.");
                return;
            }

            recognition = new SpeechRecognition();
            recognition.lang = "en-US";
            recognition.interimResults = false;  // Only get final results
            recognition.continuous = false;      // Stop after each speech

            recognition.onstart = () => console.log("️ Speech recognition started...");
            recognition.onspeechstart = () => console.log(" Detected speech...");
            recognition.onspeechend = () => console.log(" Speech ended...");

            recognition.onresult = (event) => {
                console.log(" Recognized:", event.results[0][0].transcript);
                document.getElementById("sendInput").value += event.results[0][0].transcript + " ";
            };

            recognition.onerror = (event) => console.error("❌ Speech recognition error:", event.error);
            recognition.onend = () => console.log("⏹️ Speech recognition stopped.");
        }

        function startSpeechRecognition() {
            if (!recognition) initSpeechRecognition();
            if (!isListening) {
                isListening = true;
                recognition.start();
                console.log("✅ Speech Recognition Started.");
            }
        }

        function stopSpeechRecognition() {
            if (recognition && isListening) {
                isListening = false;
                recognition.stop();
                console.log("⏹️ Speech Recognition Stopped.");
            }
        }

        // Button event listeners
        const speechButton = document.getElementById("speechButton");
        speechButton.addEventListener("mousedown", startSpeechRecognition);
        speechButton.addEventListener("mouseup", stopSpeechRecognition);
        speechButton.addEventListener("mouseleave", stopSpeechRecognition);
    </script>

</body>
</html>

我排查了一下，发现麦克风权限已经获取到了（控制台能打印Microphone Permission: granted），也能看到️ Speech recognition started...和 Detected speech...这些日志，但就是onresult里的内容完全没输出，也没有报错信息。单独把这段回调代码拎出来，确认逻辑没问题，但就是不执行：

recognition.onresult = (event) => {
    console.log(" Recognized:", event.results[0][0].transcript);
    document.getElementById("sendInput").value += event.results[0][0].transcript + " ";
};

尝试过的排查方向与可能的解决方案：

检查运行环境：Web Speech Recognition API要求线上环境必须是HTTPS（本地localhost除外），如果是HTTP环境API会静默失效，不会触发识别流程。我之前在HTTP服务器上测试就遇到过这个问题，换成HTTPS后就正常了。
调整识别参数：当前设置的continuous = false意味着识别一段语音后就停止，如果语音过短或环境噪音干扰，可能系统没识别到有效文本就结束了。可以尝试把continuous设为true，interimResults设为true，这样能看到实时中间结果，方便确认识别是否真的在工作：
```
recognition.interimResults = true;
recognition.continuous = true;
```
补充监听onnomatch事件：如果语音识别没有匹配到任何有效文本，会触发onnomatch事件，这个事件默认不会输出日志，很容易被忽略。可以加上这个回调来排查：
```
recognition.onnomatch = () => console.log("😮 未匹配到任何可识别的语音内容");
```
核对语言设置：代码里设置的是en-US（美式英语），如果你的发音不是美式英语，可能识别率极低甚至无法触发结果。可以改成对应语言，比如中文的zh-CN，确保语言与发音匹配。
检查麦克风硬件：虽然权限已获取，但麦克风可能硬件故障或被其他程序占用。可以用系统自带的录音工具测试，确保麦克风能正常收录声音。
重置浏览器服务：有时候浏览器的Web Speech后台服务可能异常，重启浏览器或者换个同内核浏览器（比如Chrome换成Edge）测试，说不定能解决问题。