百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）

这个项目需要用到语音识别，最后选择的是百度语音识别。原因第一是项目中用到的地方不大，属于微型和小型功能点，第二就是属于临时增加的需求，没有太多的时间去开发，第三就是后端对于自主开发语音识别觉得较为困难，浪费时间。

加载语音识别的文件
下载recorder.js：主要用来收集声音转化为mp3等格式的文件。
放置在如图所示的位置

注意：这个地方有一个关键点，在recorder.js文件里，有一个文件加载路径，这个路径是绝对路径，而不是相对路径，如果你的网址是在二级网址上或文件存放服务器位置在二级目录下，请修改对应的路径，如下图所示：

正常在本地开发，切换成/js/recorder/ 即可，但在生产环境则需要改为你所在文件的地址，或者在服务器根目录下加js文件（不建议，容易出各种奇怪问题）。
在index.html加入recorder

    <script type="text/javascript" src="<%= BASE_URL %>js/recorder/recorder.js"></script>

创建对应组件

<template>
<div class="voiceToText"><div class="close"><i class="el-icon-close" @click="closeVoice"></i></div><div class="voice-header">请说出搜索信息</div><div class="wrap-recorder"><div><div id="container"><img src="../../assets/images/voiceToText/mic.png" alt="" @click="handleClick"><div class='circle circle--3' v-show="recording"></div><div class='circle circle--5' v-show="recording"></div></div></div><p class="tip">{{ tiptext }}</p></div><div class="controller"><el-button class="controller-cancel" @click="closeVoice">取消</el-button><el-button class="controller-ensure" @click="setMp3">确认</el-button></div>
</div>
</template><script>
import {$post} from "@/config/http/http";export default {name: "voiceToText",data() {return {tiptext: "点击录音",recording: false, // 标记是否在录音intervaltimerid: "", // 间隔时间定时器编号recorder: null,time: 0,url:'',//地址mblob:'',//文件};},props:{visibility:{type:Boolean,default:false}},watch:{},mounted() {this.init()},methods:{closeVoice(){this.recording = false;clearInterval(this.intervaltimerid);this.recorder.stop();this.tiptext = "点击录音";this.$emit('closeVoice',false)console.log('zi')},init() {this.recorder = new MP3Recorder({//numChannels: 1,     //声道数,默认为1sampleRate: 16000,   //采样率,一般由设备提供,比如 48000bitRate: 128, //比特率,不要低于64,否则可能录制无声音（人声）//useMediaRecorder: true, //是否使用MediaRecorder录音（不支持转码为mp3文件）//recorderType: "video/webm;codes=vp9",  //默认编码，仅 useMediaRecorder 为true且浏览器支持时生效//录音结束事件complete: (blob, ext) => {var url = URL.createObjectURL(blob);this.$emit("handleStop", {url: url,mblob: blob});this.url = url;this.mblob = blob;}});},// 点击处理handleClick() {//录音支持检测console.log(this.recorder.support)if (!this.recorder.support) return;this.recording = !this.recording;this.$emit("handleStop", {url: "",mblob: null,});if (this.recording) {this.time = 0;this.tiptext = "正在录音... (" + this.time + "s)";this.recorder.start(this.successFun(), this.errorFun());} else {clearInterval(this.intervaltimerid);this.recorder.stop();this.tiptext = "点击录音";}},writeError() {},successFun() {this.intervaltimerid = setInterval(() => {// 开始累积if (this.time == 60) {this.recorder.stop();this.recording = false;this.tiptext = "点击录音";console.log("对不起，录音只支持60秒以内的语音！");this.$message({message: '对不起，录音只支持60秒以内的语音！',type: 'warning'});clearInterval(this.intervaltimerid);return false;}this.time = this.time + 1;this.tiptext = "正在录音... (" + this.time + "s)";}, 1000);},errorFun(e) {// clearInterval(this.intervaltimerid);// switch (e.code || e.name) {//   case "PERMISSION_DENIED"://   case "PermissionDeniedError"://     // this.writeError("用户拒绝提供设备。");//     break;//   case "NOT_SUPPORTED_ERROR"://   case "NotSupportedError"://     // this.writeError("浏览器不支持硬件设备。");//     break;//   case "MANDATORY_UNSATISFIED_ERROR"://   case "MandatoryUnsatisfiedError"://     // this.writeError("无法发现指定的硬件设备。");//     break;//   default://     // this.writeError(ijutr//     //   "无法打开麦克风。异常信息:" + (e.code || e.name)//     // );//     break;// }},setMp3(){// phoneLogin(formData).then((res)=>{//   console.log(res)// })if (!!this.recording){this.recording = false;clearInterval(this.intervaltimerid);this.recorder.stop();this.tiptext = "点击录音";}setTimeout(()=>{if (!!!this.mblob){this.$message.error('请先录音');}//如果这里出现文件报错   请修改record.js中 worker = new Worker(ops.WORKER_PATH || '/js/recorder/recorder-worker.js');console.log(this.mblob)var formData = new FormData()formData.append('file', this.mblob)$post('/public/psBaiduSpeechRecognition/getSpeechRecognition',formData).then(res=>{console.log(res.data.result[0])this.$emit("voiceText", res.data.result[0]);this.mblob = '';this.url = '';})},500)},}
}
</script><style scoped lang="less">
.voiceToText{position: absolute;z-index: 9999;width: 451px;height: 365px;background: rgba(0,23,28,0.70);border: 2px solid rgba(59,215,238,0.60);top:calc(50% - 183px);left:calc(50% - 225px);.close{width: 100%;height: 25px;text-align: right;line-height: 25px;padding-right: 5px;color: #ffffff;font-size: 18px;position: absolute;top: 0;i{cursor: pointer;}}.voice-header{width: 100%;height: 60px;line-height: 40px;text-align: center;font-size: 18px;color: #ffffff;background: url("~@/assets/images/voiceToText/header.png") 50% 50% no-repeat;}.wrap-recorder {text-align: center;.icon {cursor: pointer;}.tip {padding-top: 20px;color: #ffffff;font-size: 18px;}}.anirecorder {position: relative;animation: mymove 5s infinite;animation-direction: alternate;animation-timing-function: ease-in-out;}@keyframes mymove {0% {transform: scale(1); /*开始为原始大小*/}25% {transform: scale(1.1); /*放大1.1倍*/}50% {transform: scale(0.9);}75% {transform: scale(1.1);}}#container {width: 125px;height: 125px;position: relative;margin: 10px auto 0;transition: opacity 1s;img{width: 30px;height: 40px;position: absolute;top: calc(50% - 20px);left: calc(50% - 15px);z-index: 99;}}.circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;animation: pulse 3s infinite ease-in-out;background: #11bfc2;}.circle--3 {opacity: 0.3333;animation-delay: 0.36s;}.circle--5 {opacity: 0.2;animation-delay: 0.6s;}.circle--3 {width: 50%;height: 50%;}.circle--5 {width: 80%;height: 80%;}@keyframes pulse {0% {transform: translate(-50%, -50%) scale(1);}25% {transform: translate(-50%, -50%) scale(1.3);}50% {transform: translate(-50%, -50%) scale(0.70);}75% {transform: translate(-50%, -50%) scale(1);}}.controller{width: 100%;height: 120px;line-height: 120px;display: flex;justify-content: center;align-items: center;button{width: 120px;height: 40px;margin-right: 20px;margin-left: 20px;}.controller-cancel{background: rgba(0,0,0,0.52);border: 1px solid rgba(113,215,214,0.57);border-radius: 5px;color: #ffffff;}.controller-ensure{background: rgba(2,69,68,0.65);border: 2px solid #80fffd;border-radius: 5px;color: #ffffff;}}
}
</style>

注意：采样率和比特率必须和后台设置一致即和百度那边的参数设置一样

百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）相关推荐

uniapp使用百度语音识别语音转文字
HBuilderX已支持讯飞语音识别和百度语音识别,这里讲下百度语音接入一:首先是百度语音识别申请这个步骤暂且省略,可以直接移步百度语音api页面自行申请,主要是为了获取语音权限以及AppID.A ...
【项目管理】Java离线版语音识别-语音转文字
Java离线版语音识别-语音转文字 1.项目前言 2.Vosk介绍 3.项目开发 3.1 项目准备 3.2 model 准备 3.3 测试音频准备 3.4 代码实现 4.效果演示 4.1 界面效果 4 ...
python基于百度sdk语音转文字
python基于百度sdk语音转文字 1.安装baidu-aip 这样pip install aip: 2.要是不行的话下载"识别.合成 RESTful API Python SDK &qu ...
# Vue 配置前端后端路由地址
Vue 配置前端后端路由地址前端路由配置配置项目地址修改 config/index.js的配置文件 proxyTable: {'/api': { //使用"/api"来代替t ...
百度语音识别api使用（Java版本）
系列文章目录文章目录系列文章目录一.pom依赖引入二.百度语音转文字三.两个字符串相似度比较方法(补充) 一.pom依赖引入 <dependenc ...
利用百度语音识别技术实现文字转语音的应用（Java版附源码）
@throws IOException @throws DemoException */ public static String getResponseString(HttpURLConnectio ...
【Java 代码实例 11】利用百度语音识别技术实现文字转语音的应用
语音识别|语音转文字识别|在线语音识别
什么是语音识别? 语音识别就是通过录音形式转化成文字,现在的语音识别技术可支持的语言有:普通话.粤语.四川话和英语. 语音识别的分类都有哪些? 语音识别分为在线识别.离线命令词和唤醒词在线识别:即联 ...
循环出按钮点击按钮显示按钮上面文字 vue el-button_前端学习计划之VUE学习（一）...
Vue 是什么 Vue是一套用于构建用户界面的渐进式框架. Vue被设计为可以自底向上逐层应用. Vue的核心库只关注视图层,易上手,便于和第三方库或既有项目整合. 现代化的工具链和各种类库结合使用, ...

百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）

百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）相关推荐

最新文章

热门文章

百度语音识别（语音转文字）vue版本 前端（后端需要做个请求转发即可）

百度语音识别（语音转文字）vue版本 前端（后端需要做个请求转发即可）相关推荐

最新文章

热门文章

百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）

百度语音识别（语音转文字）vue版本前端（后端需要做个请求转发即可）相关推荐