javascript语音识别依赖web speech api,主要通过speechrecognition接口实现,需检测兼容性、获取麦克风权限,并配置continuous、interimresults等参数以支持连续实时识别。

JavaScript 实现语音识别主要依靠浏览器原生支持的 Web Speech API,其中关键接口是 SpeechRecognition(目前在 Chrome、Edge 等基于 Chromium 的浏览器中稳定可用,Firefox 支持有限,Safari 尚未支持)。它允许网页通过麦克风实时捕获语音并转换为文本。
确认浏览器兼容性与权限获取
Web Speech API 不是所有浏览器都默认启用,调用前需检查是否存在,并引导用户授予权限:
- 检测
window.SpeechRecognition或window.webkitSpeechRecognition是否存在(Chrome 使用带前缀的版本) - 首次调用
recognition.start()时,浏览器会自动弹出麦克风权限请求;若用户拒绝或未授权,需提示手动开启(如进入设置 → 网站设置 → 麦克风) - 可在页面加载后尝试一次静默检测,避免用户点击后才报错
初始化并配置 SpeechRecognition 实例
创建识别器后,可设置识别行为,提升实用性:
下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 使用
new (SpeechRecognition || webkitSpeechRecognition)()创建实例 - 设置
recognition.continuous = true支持连续识别(非说完即停) - 设
recognition.interimResults = true可获取中间结果(带下划线的暂定文本),适合实时反馈 - 指定语言:如
recognition.lang = 'zh-CN'(中文)或'en-US'(英文) - 限制单次识别时长:用
recognition.maxAlternatives = 1减少冗余结果
监听关键事件并处理识别结果
语音识别是异步过程,依赖事件驱动。核心事件有:
-
onstart:麦克风已开启,开始收音 -
onresult:收到识别结果。event.results是SpeechRecognitionResultList,每项含多个SpeechRecognitionAlternative;取results[results.length - 1][0].transcript获取最新文本 -
onend:识别结束(可能因超时、错误或用户停止)。常在此处自动重启:recognition.start(),实现“一直听”效果 -
onerror:捕获错误,如error.error === 'no-speech'(没检测到语音)、'aborted'(被中断)或'not-allowed'(权限被拒)
基础调用示例(可直接运行)
以下代码片段可粘贴进 HTML 文件,在 Chrome 中测试:
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
console.error('当前浏览器不支持语音识别');
} else {
const recognition = new SpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.continuous = true;
<p>recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log('识别结果:', transcript);
};</p><p>recognition.onend = () => recognition.start(); // 自动重连
recognition.onerror = (e) => console.warn('识别出错:', e.error);</p><p>// 页面加载后等待用户触发,例如点击按钮再 start()
document.getElementById('start-btn').onclick = () => recognition.start();
}</p>大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










