<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别示例</title>
</head>
<body>

<h2>语音识别示例</h2>
<p>点击下方按钮开始语音输入：</p>

<!-- 语音输入按钮 -->
<button id="start-btn">开始语音输入</button>

<!-- 显示识别结果 -->
<p>识别结果: <span id="result"></span></p>

<script>
    // 检查浏览器是否支持SpeechRecognition
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
        alert('你的浏览器不支持语音识别功能，请使用支持的浏览器，例如Google Chrome。');
    } else {
        const recognition = new SpeechRecognition();
        recognition.lang = 'zh-CN';  // 设置识别语言为中文
        recognition.interimResults = false;  // 不返回临时结果
        recognition.maxAlternatives = 1;  // 返回的识别结果数量

        const startBtn = document.getElementById('start-btn');
        const resultSpan = document.getElementById('result');

        startBtn.onclick = () => {
            recognition.start();  // 开始语音识别
        };

        recognition.onstart = () => {
            console.log('开始语音识别...');
            startBtn.disabled = true;
            startBtn.textContent = '正在识别...';
        };

        recognition.onresult = (event) => {
            const transcript = event.results[0][0].transcript;
            console.log('识别结果:', transcript);
            resultSpan.textContent = transcript;
            sendToBackend(transcript);  // 将识别结果发送到后台
        };

        recognition.onerror = (event) => {
            console.error('识别错误:', event.error);
            alert('语音识别出错: ' + event.error);
        };

        recognition.onend = () => {
            console.log('语音识别结束');
            startBtn.disabled = false;
            startBtn.textContent = '开始语音输入';
        };

        function sendToBackend(transcript) {
            fetch('http://127.0.0.1:5000/msg', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin':'*'
                },
                body: JSON.stringify({ msg: transcript }),
                // mode: 'no-cors'
            })
            .then(response => response.json())
            .then(data => {
                console.log('服务器响应:', data);
            })
            .catch((error) => {
                console.error('发送到后台时发生错误:', error);
            });
        }
    }
</script>

</body>
</html>
