js实现声控
使用 Web Speech API 实现语音识别
Web Speech API 是现代浏览器提供的原生语音识别接口，无需额外依赖库。以下是一个基础实现示例：
// 检查浏览器兼容性
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
// 设置参数
recognition.continuous = false; // 单次识别
recognition.interimResults = true; // 返回临时结果
recognition.lang = 'zh-CN'; // 设置语言
// 开始识别
recognition.start();
// 处理结果
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log('识别结果:', transcript);
};
// 错误处理
recognition.onerror = (event) => {
console.error('识别错误:', event.error);
};
} else {
console.error('当前浏览器不支持语音识别');
}第三方库实现方案
使用开源的 annyang 库可以快速实现语音命令控制：
// 引入库后初始化
if (annyang) {
const commands = {
'打开 *page': (page) => {
console.log(`打开${page}页面`);
},
'搜索 *term': (term) => {
console.log(`搜索${term}`);
}
};
annyang.addCommands(commands);
annyang.start({ language: 'zh-CN' });
}语音合成实现
通过 speechSynthesis API 实现文本转语音：
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 1; // 语速
window.speechSynthesis.speak(utterance);
}
speak('语音播报测试');注意事项
- 浏览器兼容性：Chrome、Edge 支持较好，部分功能需 HTTPS 环境
- 用户授权：首次使用需获取麦克风权限
- 移动端适配：需处理设备旋转等场景下的重新初始化
- 性能优化：长时间监听需考虑内存管理
高级功能扩展
- 自定义热词唤醒：通过分析音频流实现本地唤醒词检测
- 语音指令上下文：结合 NLP 处理多轮对话
- 离线识别：使用 TensorFlow.js 加载本地语音模型
完整项目建议结合 Vue/React 等框架实现状态管理，对于复杂场景可考虑专业语音服务如 Azure Speech Service 或阿里云智能语音交互。
