浏览器语音识别：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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。