弹来弹去跑马灯!

浏览器语音识别-webkitSpeechRecognition

浏览器语音识别:webkitSpeechRecognition

 

<!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>
    <script>
      window.onload = () => {
        const button = document.getElementById('button');
        button.addEventListener('click', () => {
          if (button.style['animation-name'] === 'flash') {
            recognition.stop();
            button.style['animation-name'] = 'none';
            button.innerText = 'Press to Start';
            content.innerText = '';
          } else {
            button.style['animation-name'] = 'flash';
            button.innerText = 'Press to Stop';
            recognition.start();
          }
        });

        const content = document.getElementById('content');

        const recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
        recognition.onresult = function (event) {
          let result = '';
          for (let i = event.resultIndex; i < event.results.length; i++) {
            result += event.results[i][0].transcript;
          }
          content.innerText = result;
        };
      };
    </script>
    <style>
      button {
        background: yellow;
        animation-name: none;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      @keyframes flash {
        0% {
          background: red;
        }
        50% {
          background: green;
        }
      }
    </style>
  </head>
  <body>
    <button id="button">Press to Start</button>
    <div id="content"></div>
  </body>
</html>

 

用1.5秒的间隔来判断它是不是已经完整的。说完了一句话。

例子2:直接输出识别结果:

 

用1.5秒的间隔来判断它是不是已经完整的。说完了一句话。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Speech Recognition with Silence Detection</title>
    <script>
        window.onload = () => {
            const button = document.getElementById('button');
            const content = document.getElementById('content');
            const history = document.getElementById('history');
            
            // 配置静默检测参数(毫秒)
            const SILENCE_THRESHOLD = 1500; // 判定为静默的时间
            let silenceTimer = null;
            let isRecognizing = false;
            let finalTranscript = '';
            let currentSentence = '';

            // 初始化语音识别
            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'zh-CN'; // 可以根据需要更改语言

            // 处理识别结果
            recognition.onresult = function (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;
                    }
                }
                
                // 更新当前显示
                currentSentence = finalTranscript + interimTranscript;
                content.innerText = currentSentence;
                
                // 重置静默计时器 - 检测到语音活动
                resetSilenceTimer();
            };

            // 重置静默计时器
            function resetSilenceTimer() {
                clearTimeout(silenceTimer);
                
                if (isRecognizing && currentSentence.trim() !== '') {
                    silenceTimer = setTimeout(() => {
                        // 静默时间达到阈值,认为一句话结束
                        finalizeSentence();
                    }, SILENCE_THRESHOLD);
                }
            }

            // 完成当前句子识别
            function finalizeSentence() {
                if (currentSentence.trim() !== '') {
                    // 添加到历史记录
                    const sentenceElement = document.createElement('div');
                    sentenceElement.className = 'sentence';
                    sentenceElement.textContent = currentSentence;
                    history.prepend(sentenceElement);
                    
                    // 触发自定义事件,供其他功能使用
                    const event = new CustomEvent('sentenceRecognized', {
                        detail: { sentence: currentSentence }
                    });
                    document.dispatchEvent(event);
                    
                    // 清空当前句子
                    finalTranscript = '';
                    currentSentence = '';
                    content.innerText = '';
                }
            }

            // 识别错误处理
            recognition.onerror = function(event) {
                console.error('Recognition error:', event.error);
                if (event.error === 'not-allowed') {
                    alert('请允许麦克风访问以使用语音识别功能');
                }
            };

            // 识别结束处理
            recognition.onend = function() {
                if (isRecognizing) {
                    // 如果仍在识别状态,自动重启识别
                    recognition.start();
                }
            };

            // 按钮点击事件
            button.addEventListener('click', () => {
                if (isRecognizing) {
                    // 停止识别
                    recognition.stop();
                    isRecognizing = false;
                    button.classList.remove('active');
                    button.innerText = 'Press to Start';
                    
                    // 最终确定当前句子
                    if (currentSentence.trim() !== '') {
                        finalizeSentence();
                    }
                } else {
                    // 开始识别
                    recognition.start();
                    isRecognizing = true;
                    button.classList.add('active');
                    button.innerText = 'Press to Stop';
                    finalTranscript = '';
                    currentSentence = '';
                    content.innerText = '';
                }
            });

            // 监听识别完成事件(可用于其他功能)
            document.addEventListener('sentenceRecognized', (event) => {
                console.log('完整句子已识别:', event.detail.sentence);
                // 在这里可以添加对识别结果的后续处理
            });
        };
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }

        button {
            background: #4CAF50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        button:hover {
            background: #45a049;
        }

        button.active {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                background-color: #4CAF50;
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }
            70% {
                background-color: #45a049;
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
            }
            100% {
                background-color: #4CAF50;
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }
        }

        #content {
            margin: 20px 0;
            padding: 15px;
            min-height: 60px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 18px;
        }

        #history {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #eee;
        }

        .sentence {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .history-title {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <button id="button">Press to Start</button>
    <div id="content" placeholder="识别结果将显示在这里..."></div>
    
    <div id="history">
        <div class="history-title">已识别的句子:</div>
    </div>
</body>
</html>

  

 

posted @ 2025-08-11 11:36  wgscd  阅读(63)  评论(0)    收藏  举报