浏览器语音识别-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>
fffffffffffffffff
test red font.