vue实现语音识别demo
实现语音识别的Vue Demo
在Vue中实现语音识别功能可以通过Web Speech API完成。以下是一个简单的实现方法：
安装依赖 需要安装vue和必要的语音识别库，如annyang（可选）。
npm install vue annyang --save创建语音识别组件 在Vue组件中集成语音识别功能。
<template>
<div>
<button @click="startListening">开始语音识别</button>
<button @click="stopListening">停止语音识别</button>
<p>识别结果: {{ transcript }}</p>
</div>
</template>
<script>
export default {
data() {
return {
transcript: '',
recognition: null
}
},
mounted() {
this.initSpeechRecognition()
},
methods: {
initSpeechRecognition() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
this.recognition = new SpeechRecognition()
this.recognition.continuous = true
this.recognition.interimResults = true
this.recognition.onresult = (event) => {
let interimTranscript = ''
let finalTranscript = ''
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
}
}
this.transcript = finalTranscript || interimTranscript
}
this.recognition.onerror = (event) => {
console.error('语音识别错误:', event.error)
}
},
startListening() {
this.recognition.start()
},
stopListening() {
this.recognition.stop()
}
}
}
</script>使用annyang简化实现 如果希望简化实现，可以使用annyang库：
<template>
<div>
<button @click="startListening">开始语音识别</button>
<p>识别结果: {{ transcript }}</p>
</div>
</template>
<script>
import annyang from 'annyang'
export default {
data() {
return {
transcript: ''
}
},
methods: {
startListening() {
if (annyang) {
annyang.addCallback('result', (phrases) => {
this.transcript = phrases[0]
})
annyang.start()
}
}
}
}
</script>注意事项
- 确保浏览器支持Web Speech API（Chrome、Edge等现代浏览器支持）
- 需要用户授权麦克风权限
- 在HTTPS环境下工作更可靠
- 移动设备上可能有额外限制
扩展功能 可以添加语音命令处理：
methods: {
addCommands() {
const commands = {
'hello': () => {
this.transcript = '你好!'
},
'search *term': (term) => {
this.transcript = `正在搜索: ${term}`
}
}
annyang.addCommands(commands)
}
}以上代码提供了在Vue中实现基本语音识别功能的方法，可以根据需求进一步扩展和完善。
