如何用Web Speech API实现实时语音识别应用？

SpeechRecognition

SpeechRecognition

webkitSpeechRecognition

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
    console.error("当前浏览器不支持Web Speech API。");
    alert("抱歉，你的浏览器不支持Web Speech API，请尝试使用Chrome或Edge浏览器。");
    return;
}

const recognition = new SpeechRecognition();

recognition.continuous = true; // 设为true表示持续监听，直到手动停止
recognition.interimResults = true; // 设为true表示返回中间结果，即用户还在说话时就显示部分识别文本
recognition.lang = 'zh-CN'; // 设置识别语言，例如中文（中国）
// recognition.lang = 'en-US'; // 或者英文（美国）

SpeechRecognition

let finalTranscript = ''; // 用于存储最终识别结果

recognition.onstart = () => {
    console.log('语音识别服务已启动，正在监听...');
    // 可以更新UI，比如显示一个“正在说话”的指示
};

recognition.onresult = (event) => {
    let interimTranscript = '';
    for (let i = event.resultIndex; i < event.results.length; ++i) {
        const transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
            finalTranscript += transcript;
        } else {
            interimTranscript += transcript;
        }
    }
    // 更新UI显示最终和中间结果
    document.getElementById('final-text').textContent = finalTranscript;
    document.getElementById('interim-text').textContent = interimTranscript;
};

recognition.onerror = (event) => {
    console.error('语音识别错误:', event.error);
    if (event.error === 'not-allowed') {
        alert('请允许浏览器访问麦克风以使用语音识别功能。');
    }
    // 可以在这里处理其他错误类型，并给用户友好的提示
};

recognition.onend = () => {
    console.log('语音识别服务已停止。');
    // 可以在这里重置UI状态
};

start()

stop()

<button id="start-btn">开始识别</button>
<button id="stop-btn">停止识别</button>
<p>最终文本: <span id="final-text"></span></p>
<p>中间文本: <span id="interim-text"></span></p>

<script>
    document.getElementById('start-btn').addEventListener('click', () => {
        finalTranscript = ''; // 每次开始前清空
        recognition.start();
    });

    document.getElementById('stop-btn').addEventListener('click', () => {
        recognition.stop();
    });
</script>

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
    // 浏览器不支持，给用户一个明确的反馈
    console.warn("当前浏览器不支持Web Speech API，部分功能将受限。");
    // 可以在这里禁用相关UI元素，或者引导用户使用支持的浏览器
    document.getElementById('speech-controls').style.display = 'none';
    document.getElementById('compatibility-message').textContent = '抱歉，您的浏览器不支持语音识别功能，请尝试使用最新版Chrome或Edge浏览器。';
    return; // 提前退出，避免后续代码报错
}
// 如果支持，则继续初始化识别器
const recognition = new SpeechRecognition();
// ... 后续代码

interimResults

interimResults

SpeechRecognition

NotAllowedError

onerror

recognition.continuous = true

onend

recognition.start()