vue 语音识别跳转页面

//recorder.js文件
export default class Recorder {
    constructor(stream, config) {
      //兼容
      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
   
      config = config || {};
      config.sampleBits = config.sampleBits || 16;   //采样数位 8, 16
      config.sampleRate = config.sampleRate || 16000; //采样率(1/6 44100)
   
      this.context = new (window.webkitAudioContext || window.AudioContext)();
      this.audioInput = this.context.createMediaStreamSource(stream);
      this.createScript = this.context.createScriptProcessor || this.context.createJavaScriptNode;
      this.recorder = this.createScript.apply(this.context, [4096, 1, 1]);
   
      this.audioData = {
        size: 0,          //录音文件长度
        buffer: [],    //录音缓存
        inputSampleRate: this.context.sampleRate,   //输入采样率
        inputSampleBits: 16,     //输入采样数位 8, 16
        outputSampleRate: config.sampleRate,   //输出采样率
        oututSampleBits: config.sampleBits,       //输出采样数位 8, 16
        input: function (data) {
          this.buffer.push(new Float32Array(data));
          this.size += data.length;
        },
        compress: function () { //合并压缩
          //合并
          let data = new Float32Array(this.size);
          let offset = 0;
          for (let i = 0; i < this.buffer.length; i++) {
            data.set(this.buffer[i], offset);
            offset += this.buffer[i].length;
          }
          //压缩
          let compression = parseInt(this.inputSampleRate / this.outputSampleRate);
          let length = data.length / compression;
          let result = new Float32Array(length);
          let index = 0, j = 0;
          while (index < length) {
            result[index] = data[j];
            j += compression;
            index++;
          }
          return result;
        },
        encodeWAV: function () {
          let sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
          let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
          let bytes = this.compress();
          let dataLength = bytes.length * (sampleBits / 8);
          let buffer = new ArrayBuffer(44 + dataLength);
          let data = new DataView(buffer);
          let channelCount = 1;//单声道
          let offset = 0;
   
          let writeString = function (str) {
            for (let i = 0; i < str.length; i++) {
              data.setUint8(offset + i, str.charCodeAt(i));
            }
          };
   
          // 资源交换文件标识符
          writeString('RIFF');
          offset += 4;
          // 下个地址开始到文件尾总字节数,即文件大小-8
          data.setUint32(offset, 36 + dataLength, true);
          offset += 4;
          // WAV文件标志
          writeString('WAVE');
          offset += 4;
          // 波形格式标志
          writeString('fmt ');
          offset += 4;
          // 过滤字节,一般为 0x10 = 16
          data.setUint32(offset, 16, true);
          offset += 4;
          // 格式类别 (PCM形式采样数据)
          data.setUint16(offset, 1, true);
          offset += 2;
          // 通道数
          data.setUint16(offset, channelCount, true);
          offset += 2;
          // 采样率,每秒样本数,表示每个通道的播放速度
          data.setUint32(offset, sampleRate, true);
          offset += 4;
          // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
          data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);
          offset += 4;
          // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
          data.setUint16(offset, channelCount * (sampleBits / 8), true);
          offset += 2;
          // 每样本数据位数
          data.setUint16(offset, sampleBits, true);
          offset += 2;
          // 数据标识符
          writeString('data');
          offset += 4;
          // 采样数据总数,即数据总大小-44
          data.setUint32(offset, dataLength, true);
          offset += 4;
          // 写入采样数据
          if (sampleBits === 8) {
            for (let i = 0; i < bytes.length; i++, offset++) {
              let s = Math.max(-1, Math.min(1, bytes[i]));
              let val = s < 0 ? s * 0x8000 : s * 0x7FFF;
              val = parseInt(255 / (65535 / (val + 32768)));
              data.setInt8(offset, val, true);
            }
          } else {
            for (let i = 0; i < bytes.length; i++, offset += 2) {
              let s = Math.max(-1, Math.min(1, bytes[i]));
              data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
            }
          }
          return new Blob([data], { type: 'audio/wav' });
        }
      };
    }
   
    //开始录音
    start(param) {
      this.audioInput.connect(this.recorder);
      this.recorder.connect(this.context.destination);
      //音频采集
      let self = this;
      let emptydatacount = 0;
      let startVoice = false
      this.recorder.onaudioprocess = function (e) {
        let data = e.inputBuffer.getChannelData(0)
        let l = Math.floor(data.length/10);
        let vol = 0;
        for(let i=0;i 10){ 
        //     param.success(self.getBlob());
        //   }
        // }else{
        //   emptydatacount = 0;
        //   startVoice = true;
        //   self.audioData.input(data);
        // }
      };
    };
   
    //停止
    stop() {
      this.recorder.disconnect();
    };
   
    //获取音频文件
    getBlob() {
      

      this.stop();
      return this.audioData.encodeWAV();
    };
   
    //回放
    play(audio) {
      audio.src = window.URL.createObjectURL(this.getBlob());
    };
   
    //清理缓存的录音数据
    clear(audio) {
      this.audioData.buffer = [];
      this.audioData.size = 0;
      audio.src = ''
    };
   
    static checkError(e) {
      const { name } = e;
      let errorMsg = ''
      switch (name) {
        case 'AbortError': errorMsg = '录音设备无法被使用'; break;
        case 'NotAllowedError': errorMsg = '用户已禁止网页调用录音设备'; break;
        case 'PermissionDeniedError': errorMsg = '用户已禁止网页调用录音设备'; break;     // 用户拒绝
        case 'NotFoundError': errorMsg = '录音设备未找到'; break;
        case 'DevicesNotFoundError': errorMsg = '录音设备未找到'; break;
        case 'NotReadableError': errorMsg = '录音设备无法使用'; break;
        case 'NotSupportedError': errorMsg = '不支持录音功能'; break;
        case 'MandatoryUnsatisfiedError': errorMsg = '无法发现指定的硬件设备'; break;
        default: errorMsg = '录音调用错误'; break;
      }
      return { error: errorMsg }
    };
   
    static get(callback, config) {
      if (callback) {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((stream) => {
            let rec = new Recorder(stream, config);
            callback(rec);
          }).catch((e) => {
            callback(Recorder.checkError(e));
          })
        } else {
          navigator.getUserMedia({ audio: true, video: false }).then((stream) => {
            let rec = new Recorder(stream, config);
            callback(rec);
          }).catch((e) => {
            // Recorder.checkError(e)
            callback(Recorder.checkError(e));
          })
        }
      }
    };
  }
  

//record-sdk.js
import Recorder from "./recorder";
export default class Record {
  startRecord (param) {
    let self = this;
    try {
      Recorder.get(rec => {
        if (rec.error) return param.error(rec.error);
        self.recorder = rec;
        self.recorder.start(param);
      })
    } catch (e) {
      param.error("开始录音失败" + e);
    }
  }
 
  stopRecord (param) {
    let self = this;
    try {
      let blobData = self.recorder.getBlob();
      param.success(blobData);
    } catch (e) {
      param.error("结束录音失败" + e);
     
    }
  }
 
  play (audio) {
    let self = this;
    try {
      self.recorder.play(audio);
    } catch (e) {
      console.error("录音播放失败" + e);
    }
  }
 
  clear (audio) {
    let self = this;
    try {
      self.recorder.clear(audio);
    } catch (e) {
      console.error("清空录音失败" + e);
    }
  }
}

vue页面引入

录音

import Fuse from "fuse.js";
import path from "path";
import Record from "@/utils/record_sdk";


 data() {
    return {
      //录音状态  false 是结束状态，true开始状态
      recordStatus: false,
      user: {},
      recorder: new Record(),
      //录音定时器-15秒自动结束录音
      timer: null,
      src: "",
      //定时器初始化时间
      number: 0,
      searchPool: [],
      fuse: undefined
    };
  },
  watch: {
    searchPool(list) {
      this.initFuse(list);
    }
  },
  mounted() {
                //所有路由地址
    this.searchPool = this.generateRoutes(this.routes);
  },
methods:{
    
ishttp(url) {
      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
    },
    initFuse(list) {
      this.fuse = new Fuse(list, {
        shouldSort: true,
        threshold: 0.4,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
          {
            name: "title",
            weight: 0.7
          },
          {
            name: "path",
            weight: 0.3
          }
        ]
      });
    },
    generateRoutes(routes, basePath = "/", prefixTitle = []) {
      let res = [];
      for (const router of routes) {
        // skip hidden router
        if (router.hidden) {
          continue;
        }
        const data = {
          path: !this.ishttp(router.path)
            ? path.resolve(basePath, router.path)
            : router.path,
          title: [...prefixTitle]
        };

        if (router.meta && router.meta.title) {
          data.title = [...data.title, router.meta.title];

          if (router.redirect !== "noRedirect") {
            // only push the routes with title
            // special case: need to exclude parent router without redirect
            res.push(data);
          }
        }
        // recursive child routes
        if (router.children) {
          const tempRoutes = this.generateRoutes(
            router.children,
            data.path,
            data.title
          );
          if (tempRoutes.length >= 1) {
            res = [...res, ...tempRoutes];
          }
        }
      }
      return res;
    },
  //点击录音按钮
    onStartRecord() {
      this.recordStatus = !this.recordStatus;
      this.number = 0;
      //开始录音
      if (this.recordStatus) {
        console.log("开始录音");
        //定时器15秒自动结束录音
        this.timer = setInterval(() => {
          this.number++;
          console.log(this.number);
          if (this.number == 15) {
            this.onStartRecord();
            this.number = 0;
          }
        }, 1000);
        let slef = this;
        this.recorder.startRecord({
          success: res => {
            console.log("音频源文件", res);
            //生成64位编码并传递后台
            this.uploadVideo(res);
            this.recordStatus = false;
          },
          error: e => {
            this.recordStatus = false;
            console.log("error", e);
            clearInterval(this.timer);
            this.msgError(e);
          }
        });
      } else {
        //结束录音
        this.recordStatus = false;
        //清除定时器
        clearInterval(this.timer);
        console.log("结束录音");
        this.recorder.stopRecord({
          success: res => {
            //此处可以获取音频源文件(res)，用于上传等操作
            console.log("音频源文件", res);
            //生成64位编码并传递后台
            this.src = window.URL.createObjectURL(res);
            this.uploadVideo(res);
          },
          error: e => {
            this.recordStatus = true;
            console.log("error", e);
            clearInterval(this.timer);
            this.msgError("操作过快,请重试");
          }
        });
      }
    },
    //转换音频base64
    uploadVideo(e) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var that = this;
      var reader = new FileReader();
      var rs = reader.readAsDataURL(e);
      //将 blob数据转换base64格式
      reader.onload = e => {
        var videoSrc = e.target.result;
        //去掉base64头部
        let audio = videoSrc.split(",");
        //提交到后台部分
        navbarRecord({ result: audio[1] })
          .then(res => {
            //去掉识别出的标点符号
            var str = res.data.result.text.replace(
              /[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\。|\>|\/|\?]/g,
              ""
            );
            //判断有没有识别出内容
            if (this.fuse.search(str).length != 0) {
              //查找到相应路由地址
              this.$router.push(this.fuse.search(str)[0].path);
            } else {
              //识别为空字符串给出提示
              if (str == "") {
                this.msgError(`没有识别到内容`);
              } else {//没有找到识别出的的页面
                this.msgError(`没有找到"${str}"页面`);
              }
            }
          })
          .catch(error => {
            console.log(error);
            loading.close();
          });
      };
    },
}