vue實現(xiàn)錄音并轉(zhuǎn)文字功能，包括PC端，手機端和企業(yè)微信自建應(yīng)用端

不止vue，不限技術(shù)棧，vue2、vue3、react、.net以及原生js均可實現(xiàn)。

原理

瀏覽器實現(xiàn)錄音并轉(zhuǎn)文字最快捷的方法是通過Web Speech API來實現(xiàn)，這是瀏覽器內(nèi)置示例的api方法，可以直接調(diào)用，無需引入任何依賴包，唯一需要注意的是瀏覽器的兼容性，具體可查看官方文檔
鏈接: Web Speech API

實現(xiàn)過程

<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 = ''; // 保存最終結(jié)果的變量
	let interimResult = ''; // 保存中間結(jié)果的變量
	const toggleSpeechRecognition = () => {
	  if (!recognition) {
	    recognition = new webkitSpeechRecognition();
	    recognition.continuous = true;
	    recognition.interimResults = true;
	    recognition.lang = 'zh-CN';
	    recognition.onresult = event => {
	      interimResult = ''; // 清空中間結(jié)果
	      for (let i = event.resultIndex; i < event.results.length; i++) {
	        if (event.results[i].isFinal) {
	          finalResult += event.results[i][0].transcript;
	        } else {
	          interimResult += event.results[i][0].transcript;
	        }
	      }
	      prompt.value = finalResult + interimResult;
	    };
	  }
	  if (isSpeaking.value) {
	    finalResult = '';
	    recognition.stop();
	  } else {
	    recognition.start();
	  }
	  isSpeaking.value = !isSpeaking.value;
	};
</script>

避坑指南

1.http問題導(dǎo)致錄音失?。何蚁嘈?9.9%的人本地開發(fā)環(huán)境啟動的都是http，當前主流瀏覽器出于安全考慮禁止http的應(yīng)用調(diào)用麥克風，需要在瀏覽器高級設(shè)置中添加白名單，具體操作為：

chrome瀏覽器地址欄中輸入chrome://flags/#unsafely-treat-insecure-origin-as-secure，回車，在Insecure origins treated as secure這欄中添加你的應(yīng)用地址，將該選項置為Enabled，然后點擊右下角彈出的Relaunch按鈕。
edge瀏覽器打開：edge://flags/#unsafely-treat-insecure-origin-as-secure，同上。

這里需要注意的是，你的電腦需要有音頻錄入設(shè)備，檢查順序為：先檢查電腦是否有音頻錄入設(shè)備（是否正常）-> 再添加瀏覽器安全白名單。

2.應(yīng)用是否被其他規(guī)則限制調(diào)用麥克風

1.iframe內(nèi)部應(yīng)用不允許直接調(diào)用麥克風，只能通過postMassage實現(xiàn)iframe內(nèi)外部通信，調(diào)用外部系統(tǒng)的方法來調(diào)用麥克風，具體我會在單獨的文章將iframe內(nèi)外部通信；
2.如果應(yīng)用嵌在企微工作臺或類似的平臺中，麥克風權(quán)限首先受企微等平臺的權(quán)限管控，一般都需要調(diào)用企微官方api來實現(xiàn)類似功能。

到此這篇關(guān)于vue實現(xiàn)錄音并轉(zhuǎn)文字功能，包括PC端web，手機端web的文章就介紹到這了,更多相關(guān)vue錄音轉(zhuǎn)文字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論