vue实现录音并转文字功能，包括PC端web，手机端web

最新推荐文章于 2025-03-14 14:26:59 发布

白白布凯西

最新推荐文章于 2025-03-14 14:26:59 发布

阅读量5.6k

点赞数 7

分类专栏： vue技术栈整理原生JS 文章标签：前端 javascript vue.js typescript

本文链接：https://blog.csdn.net/byebukesi/article/details/138216854

版权

vue实现录音并转文字功能，包括PC端，手机端和企业微信自建应用端

不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。

原理

浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现，这是浏览器内置示例的api方法，可以直接调用，无需引入任何依赖包，唯一需要注意的是浏览器的兼容性，具体可查看官方文档
链接: Web Speech API

实现过程

<template>
	<button @click="toggleSpeechRecognition ">{
  { isSpeaking?'开始':'停止' }}录音</button>
	<span>{
  { prompt }}</span>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	//测试语音识别
	const prompt = ref('')
	const isSpeaking = ref(false);
	let recognition: any = null;
	let finalResult = ''; // 保存最终结果的变量
	let interimResult = ''; // 保存中间结果的变量
	const toggleSpeechRec