vue使用语音识别

vue使用语音识别

使用 Web Speech API 实现语音识别功能

语音转换的原理可以简单概括为以下几个步骤：

可以把语音转换的过程比作一个翻译员的工作：

• 麦克风是耳朵，负责听声音。
• 特征提取是翻译员的记笔记过程，记录下关键的发音。
• 声学模型是翻译员的词典，帮助理解每个发音对应的文字。
• 语言模型是翻译员的语法知识，确保翻译出来的句子是通顺的。
• 最后，翻译员将完整的句子写下来，呈现给你。

下面的示例包括一个简单的界面，用户可以点击按钮开始和停止语音识别，并在页面上显示识别结果。

实例：

src/components 目录下创建一个新的组件文件 speech.vue：

<template>
<div>
<button @click="startRecognition">开始识别</button>
<button @click="stopRecognition">停止识别</button>
<p>识别结果: {{ transcript }}</p>
</div>
</template>

<script>
export default {
data() {
return {
recognition: null,
transcript: "", // 用于存储最终结果
interimTranscript: "", // 用于存储临时结果
};
},
methods: {
startRecognition() {
if (!("webkitSpeechRecognition" in window)) {
alert("您的浏览器不支持语音识别，请使用 Chrome 浏览器。");
return;
}

this.recognition = new webkitSpeechRecognition();
this.recognition.continuous = true; // 设置为连续识别
this.recognition.interimResults = true; // 返回临时结果
this.recognition.lang = "zh-CN"; // 设置语言为中文

this.recognition.onstart = () => {
console.log("语音识别已启动");
};

this.recognition.onresult = (event) => {
console.log(event);
let finalTranscript = ""; // 用于存储最终结果
this.interimTranscript = ""; // 清空临时结果

for (let i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
// 如果是最终结果，追加到 finalTranscript
finalTranscript += event.results[i][0].transcript;
} else {
// 如果是临时结果，存储到 interimTranscript
this.interimTranscript += event.results[i][0].transcript;
}
}

// 将最终结果追加到 transcript 中
this.transcript += finalTranscript;
console.log("临时结果:", this.interimTranscript);
};

this.recognition.onerror = (event) => {
console.error("语音识别错误", event);
};

this.recognition.onend = () => {
console.log("语音识别服务已断开");
};

this.recognition.start();
},
stopRecognition() {
if (this.recognition) {
this.recognition.stop();
}
},
},
};
</script>

<style scoped>
button {
margin: 5px;
}
</style>

在 src/App.vue 中引入并使用 speech 组件：

<template>
<div id="app">
<speech />
</div>
</template>

<script>
import speech from './components/`speech.vue';

export default {
name: 'App',
components: {
speech,
},
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>