js实现语音
语音识别与合成实现方法
Web Speech API
Web Speech API 是浏览器原生支持的语音技术方案，包含以下两个核心功能：
语音识别（SpeechRecognition）
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN';
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
console.log('识别结果:', transcript);
};
recognition.start();语音合成（SpeechSynthesis）
const utterance = new SpeechSynthesisUtterance('你好世界');
utterance.lang = 'zh-CN';
speechSynthesis.speak(utterance);第三方库方案
对于需要更高兼容性的场景，可以考虑以下库：
-
annyang：轻量级语音识别库
annyang.addCommands({'你好': () => alert('你好!')}); annyang.start({lang: 'zh-CN'}); -
Howler.js：高级音频播放控制
const sound = new Howl({src: ['audio.mp3']}); sound.play();
实现注意事项
-
浏览器兼容性检测
if (!('webkitSpeechRecognition' in window)) { alert('当前浏览器不支持语音识别'); } -
用户权限处理
navigator.permissions.query({name:'microphone'}) .then(permissionStatus => { if (permissionStatus.state === 'denied') { showPermissionRequestUI(); } }); -
移动端适配建议
- 添加唤醒词检测功能
- 优化离线识别场景
- 处理屏幕锁定状态下的语音交互
性能优化技巧
-
限制识别词汇范围提高准确率
recognition.maxAlternatives = 3; recognition.continuous = false; -
预加载语音资源
const voices = speechSynthesis.getVoices(); utterance.voice = voices.find(v => v.lang === 'zh-CN');
完整示例代码
<button id="startBtn">开始录音</button>
<script>
document.getElementById('startBtn').addEventListener('click', () => {
const recognition = new webkitSpeechRecognition();
recognition.onresult = (e) => {
const synth = window.speechSynthesis;
const reply = new SpeechSynthesisUtterance('你说的是: '+e.results[0][0].transcript);
synth.speak(reply);
};
recognition.start();
});
</script>
