vue实现语音识别
Vue 实现语音识别的方法
使用 Web Speech API
Web Speech API 是浏览器原生支持的语音识别接口，无需额外安装库。通过 SpeechRecognition 对象实现语音转文字功能。
// 在 Vue 组件中
export default {
data() {
return {
recognition: null,
transcript: '',
isListening: false
}
},
mounted() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
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;
};
}
},
methods: {
toggleListening() {
if (this.isListening) {
this.recognition.stop();
} else {
this.recognition.start();
}
this.isListening = !this.isListening;
}
}
}使用第三方库（如 vue-voice-recognition）
对于更简单的集成，可以使用专门为 Vue 设计的语音识别库。
安装库：
npm install vue-voice-recognition在 Vue 中使用：
import VueVoiceRecognition from 'vue-voice-recognition';
Vue.use(VueVoiceRecognition);
export default {
data() {
return {
text: ''
}
},
methods: {
onResult(result) {
this.text = result;
}
}
}模板部分：
<template>
<div>
<button @click="$startListening">开始录音</button>
<button @click="$stopListening">停止录音</button>
<p>{{ text }}</p>
</div>
</template>注意事项
- Web Speech API 的兼容性有限，建议在 Chrome 或 Edge 浏览器中使用。
- 某些浏览器需要用户明确授权麦克风权限。
- 移动端设备的支持可能有所不同，需进行测试。
- 第三方库可能提供更多功能，如多语言支持或更好的错误处理。
扩展功能
语音识别结果可以进一步处理，如发送到后端 API 进行自然语言处理，或触发特定的 Vue 组件行为。例如，可以将识别结果与 Vuex 结合，实现全局状态管理。
