项目实训：VUE前端采用Recorder 实现录音

1.下载：

npm install recorder-core

2.button，点击录音小图标，开始录音，点叉取消录音，点勾录音成功

实现代码

  <div v-if="isRecording" style="display: flex">
          <div class="send boxinput" style="margin-right: 10px" @click="stopRecording">
            <img src="@/assets/img/emoji/no.png" alt=""/>
          </div>
          <span style="display: flex; justify-content: center; align-items: center;">{{ recordedTime }}s</span>
          <div class="send boxinput" style="margin-left: 10px" @click="saveRecording">
            <img src="@/assets/img/emoji/yes.png" alt=""/>
          </div>
        </div>
        <div v-else class="send boxinput" @click="startRecording">
          <img src="@/assets/img/emoji/audio1.png" alt=""/>
        </div>
        <input class="inputs" v-model="inputMsg" @keyup.enter="sendText"/>
        <div class="send boxinput" @click="sendText">
          <img src="@/assets/img/emoji/rocket.png" alt=""/>
 </div>

3.打开录音权限

导入

import Recorder from 'recorder-core';

//引入mp3格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统引入进来即可
import 'recorder-core/src/engine/mp3';
import 'recorder-core/src/engine/mp3-engine';
//录制wav格式的用这一句就行
import 'recorder-core/src/engine/wav';

//可选的插件支持项，这个是波形可视化插件
import 'recorder-core/src/extensions/waveview';
//ts import 提示：npm包内已自带了.d.ts声明文件（不过是any类型）

 //打开录音权限
    recOpen() {
      // 创建录音对象
      this.rec = Recorder({
        type: "mp3", // 录音格式，可以换成wav等其他格式
        sampleRate: 16000, // 录音的采样率，越大细节越丰富越细腻
        bitRate: 16, // 录音的比特率，越大音质越好
        onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) => {
          // 录音实时回调，大约1秒调用12次本回调
          if (this.wave) this.wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
        }
      });

4.开始录音

  //打开录音权限
    recOpen() {
      // 创建录音对象
      this.rec = Recorder({
        type: "mp3", // 录音格式，可以换成wav等其他格式
        sampleRate: 16000, // 录音的采样率，越大细节越丰富越细腻
        bitRate: 16, // 录音的比特率，越大音质越好
        onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) => {
          // 录音实时回调，大约1秒调用12次本回调
          if (this.wave) this.wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
        }
      });
      // 打开录音，获得权限
      this.rec.open(() => {
        console.log("录音已打开");
        // if (this.$refs.recwave) {
        //   // 创建音频可视化图形绘制对象
        //   this.wave = Recorder.WaveView({ elem: this.$refs.recwave });
        // }
      }, (msg, isUserNotAllow) => {
        // 用户拒绝了录音权限，或者浏览器不支持录音
        console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
      });
    },

5.结束录音

 //开始录音
    startRecording() {
      if (!this.rec) {
        console.error("未打开录音");
        return;
      }
      this.isRecording = true
      this.rec.start();
      console.log("已开始录音");
      this.stopTimer()
      this.recordedTime = 0
      // 开始计时
      this.startTimer();
    },

6.结束录音并上传

 //取消录音
    stopRecording() {
      this.isRecording = false
      this.stopTimer()
    },
    //纶音结束并上传
    saveRecording() {
      if (!this.rec) {
        console.error("未打开录音");
        return;
      }
      this.rec.stop((blob, duration) => {
        // blob就是我们要的录音文件对象，可以上传，或者本地播放
        this.recBlob = blob;
        var localUrl = (window.URL || webkitURL).createObjectURL(blob);
        console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
        this.upload(blob); // 把blob文件上传到服务器
        this.isRecording = false
      }, (err) => {
        console.error("结束录音出错：" + err);
        this.rec.close(); // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
        this.rec = null;
      });
    },

上传可以自己实现后端逻辑

做参考：

 upload(blob) {
      console.log("语音上传服务器：");
      this.blobToDataURI(blob, (result) => {
        request.post('/upload', {
          file: result.split(",")[1],
          format: "wav",
          len: atob(result.split(",")[1]).length,
        })
            .then((res) => {
              console.log(res)
              if (res.code == 200) {
                this.memory += "回答：" + res.result + "\n"
                console.log(res.result)
              }
            })
            .catch((err) => {
              console.log(err);
            });
      });
    },