vue实现语音识别demo
使用 Web Speech API 实现语音识别
Vue 可以结合浏览器原生支持的 Web Speech API 实现语音识别功能。以下是一个简单的实现示例：
安装依赖（可选）
若需扩展功能，可安装 vue-web-speech 等插件：
npm install vue-web-speech基础实现代码
在 Vue 组件中直接调用 API：
<template>
<div>
<button @click="startRecognition">开始录音</button>
<button @click="stopRecognition">停止</button>
<p>识别结果: {{ transcript }}</p>
</div>
</template>
<script>
export default {
data() {
return {
recognition: null,
transcript: ''
}
},
mounted() {
this.initRecognition()
},
methods: {
initRecognition() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
this.recognition = new SpeechRecognition()
this.recognition.continuous = true
this.recognition.interimResults = true
this.recognition.onresult = (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) {
this.transcript += transcript
} else {
interimTranscript += transcript
}
}
}
},
startRecognition() {
this.recognition.start()
},
stopRecognition() {
this.recognition.stop()
}
}
}
</script>使用第三方库（增强兼容性）
对于需要更好兼容性或更多功能的场景，推荐使用以下方案：
安装 annyang 库：
npm install annyang示例实现：
<script>
import annyang from 'annyang'
export default {
data() {
return {
commands: {
'hello': () => alert('Hello world!'),
'show me *tag': (tag) => this.search(tag)
}
}
},
mounted() {
if (annyang) {
annyang.addCommands(this.commands)
annyang.start()
}
},
methods: {
search(tag) {
console.log('Searching for:', tag)
}
}
}
</script>注意事项
-
浏览器兼容性
Web Speech API 目前仅 Chrome、Edge、Safari 支持较好，需添加前缀（如webkitSpeechRecognition） -
HTTPS 限制
语音识别功能通常要求网页运行在 HTTPS 环境下 -
用户授权
首次使用需获取麦克风权限，建议添加权限请求提示 -
多语言支持
可通过设置语言参数支持中文等语言：this.recognition.lang = 'zh-CN' -
错误处理
建议添加错误监听：this.recognition.onerror = (event) => { console.error('识别错误:', event.error) }
完整项目可参考 GitHub 上的 vue-speech-recognition 等开源实现。
