如何用BOM实现页面的语音识别？

// 检查浏览器是否支持Web Speech API
// 注意：不同浏览器可能需要不同的前缀，或者根本不支持
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
    console.warn('抱歉，您的浏览器不支持Web Speech API，无法进行语音识别。');
    alert('您的浏览器不支持语音识别功能。建议使用Chrome浏览器。');
    // 这里可以提供一个优雅降级方案，比如显示一个文本输入框
} else {
    const recognition = new SpeechRecognition();
    recognition.lang = 'zh-CN'; // 设置识别语言，例如中文普通话
    recognition.continuous = false; // 设为true可以持续识别，直到手动停止
    recognition.interimResults = false; // 是否返回临时结果，true可以实时显示识别中的文本

    // 获取DOM元素，用于显示识别结果和控制按钮
    const startBtn = document.getElementById('startVoiceBtn');
    const stopBtn = document.getElementById('stopVoiceBtn');
    const resultDisplay = document.getElementById('voiceResult');

    if (startBtn) {
        startBtn.onclick = () => {
            resultDisplay.textContent = '请开始说话...';
            startBtn.disabled = true;
            stopBtn.disabled = false;
            try {
                recognition.start();
            } catch (e) {
                console.error('语音识别启动失败:', e);
                resultDisplay.textContent = '启动失败，请检查麦克风权限或稍后再试。';
                startBtn.disabled = false;
                stopBtn.disabled = true;
            }
        };
    }

    if (stopBtn) {
        stopBtn.onclick = () => {
            recognition.stop();
            startBtn.disabled = false;
            stopBtn.disabled = true;
            resultDisplay.textContent = '识别已停止。';
        };
    }

    // 识别到结果时触发
    recognition.onresult = (event) => {
        let finalTranscript = '';
        // 遍历所有识别结果
        for (let i = event.resultIndex; i < event.results.length; ++i) {
            const transcript = event.results[i][0].transcript;
            if (event.results[i].isFinal) {
                finalTranscript += transcript;
            }
        }
        resultDisplay.textContent = finalTranscript;
        console.log('识别到的文本:', finalTranscript);
    };

    // 识别结束时触发 (无论是成功还是失败)
    recognition.onend = () => {
        console.log('语音识别服务已断开。');
        startBtn.disabled = false;
        stopBtn.disabled = true;
        // 如果不是手动停止，可能是识别超时或无声音
        if (resultDisplay.textContent === '请开始说话...') {
             resultDisplay.textContent = '没有检测到语音，请重试。';
        }
    };

    // 识别错误时触发
    recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error);
        let errorMessage = '发生未知错误。';
        switch (event.error) {
            case 'no-speech':
                errorMessage = '没有检测到语音。';
                break;
            case 'not-allowed':
                errorMessage = '麦克风权限被拒绝。请检查浏览器设置。';
                break;
            case 'aborted':
                errorMessage = '识别被用户或系统中断。';
                break;
            case 'network':
                errorMessage = '网络错误导致识别失败。';
                break;
            case 'bad-grammar':
                errorMessage = '语法错误。'; // 比较少见
                break;
            case 'language-not-supported':
                errorMessage = '不支持当前语言。';
                break;
            default:
                errorMessage = `识别错误：${event.error}`;
        }
        resultDisplay.textContent = `错误: ${errorMessage}`;
        startBtn.disabled = false;
        stopBtn.disabled = true;
    };
}

<button id="startVoiceBtn">开始语音识别</button>
<button id="stopVoiceBtn" disabled>停止语音识别</button>
<p>识别结果: <span id="voiceResult"></span></p>

// 检查浏览器是否支持语音合成
const synth = window.speechSynthesis;

if (!synth) {
    console.warn('抱歉，您的浏览器不支持Web Speech API的语音合成功能。');
} else {
    // 获取可用的语音
    let voices = [];
    function populateVoiceList() {
        voices = synth.getVoices().sort((a, b) => {
            const aname = a.name.toUpperCase();
            const bname = b.name.toUpperCase();
            if (aname < bname) return -1;
            if (aname == bname) return 0;
            return +1;
        });
        // 可以在这里将语音列表展示给用户选择
        // console.log('可用语音:', voices);
    }

    populateVoiceList();
    if (synth.onvoiceschanged !== undefined) {
        synth.onvoiceschanged = populateVoiceList;
    }

    const speakText = (text, lang = 'zh-CN') => {
        if (synth.speaking) {
            console.warn('正在说话中，请稍候...');
            return;
        }
        if (text !== '') {
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = lang; // 设置语言

            // 尝试选择一个合适的语音，例如中文普通话
            const selectedVoice = voices.find(voice => voice.lang === lang && voice.name.includes('Google') || voice.name.includes('Microsoft'));
            if (selectedVoice) {
                utterance.voice = selectedVoice;
            } else {
                console.warn(`未找到适合 ${lang} 的高质量语音，将使用默认语音。`);
            }

            utterance.onerror = (event) => {
                console.error('语音合成错误:', event);
            };

            synth.speak(utterance);
        }
    };

    // 示例用法
    // speakText('你好，欢迎使用语音助手。');
    // speakText('How are you?', 'en-US');
}