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

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

1. 加载语音识别的文件
   下载recorder.js：主要用来收集声音转化为mp3等格式的文件。
   放置在如图所示的位置
   
   注意：这个地方有一个关键点，在recorder.js文件里，有一个文件加载路径，这个路径是绝对路径，而不是相对路径，如果你的网址是在二级网址上或文件存放服务器位置在二级目录下，请修改对应的路径，如下图所示：
   
   正常在本地开发，切换成/js/recorder/ 即可，但在生产环境则需要改为你所在文件的地址，或者在服务器根目录下加js文件（不建议，容易出各种奇怪问题）。
2. 在index.html加入recorder
   

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

3. 创建对应组件
   

<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,     //声道数,默认为1
        sampleRate: 16000,   //采样率,一般由设备提供,比如 48000
        bitRate: 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>

注意：采样率和比特率必须和后台设置一致即和百度那边的参数设置一样文章来源地址https://www.toymoban.com/news/detail-518319.html

到了这里，关于百度语音识别（语音转文字）vue版本 前端（后端需要做个请求转发即可）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！