Vue 调用录音以及录音上传

做一个H5页面，在微信端打开，调取手机麦克风进行录音，因为一些原因不打算用微信的JSSDK提供的音频接口，录音调用以及录音上传调用了Recorder，这里给出github链接 https://github.com/xiangyuecn/Recorder。 试了好几个录音调用的工具包，这个是唯一能用的。要注意的一点是，录音调用必须要用https请求，不然没有办法请求到麦克风权限。

1）安装

通过 npm/cnpm 进行安装 npm install recorder-core

2）代码

import Recorder from 'recorder-core'
import 'recorder-core/src/engine/wav'
import 'recorder-core/src/engine/mp3-engine'
//由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
import 'recorder-core/src/engine/beta-amr'
import 'recorder-core/src/engine/beta-amr-engine'
data() {
rec: Recorder({
        type:"wav",sampleRate:16000,bitRate:16
        ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate){}
      })
},
mounted() {
    var recOpen=function(){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
      that.rec.open(function(){    
        console.log("已打开录音，可以点击开始了");	
        //rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
      },function(msg,isUserNotAllow){//用户拒绝未授权或不支持
        // clearTimeout(t);
        console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg, 1);
      });
    };
    recOpen();
},
methods: {
    /**开始录音**/
  recStart(){//打开了录音后才能进行start、stop调用
      this.rec.start();
  },

  /**结束录音**/
  recStop(){
      this.rec.stop((blob,duration) => {
        //  var voiceToTextRes = ""
          this.showRecordingBox = false
          console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
          // this.rec.close();//释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
          // this.rec=null;
          //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
          /*** 【立即播放例子】 ***/
          // var audio=document.createElement("audio");
          // audio.controls=true;
          // document.body.appendChild(audio);
          // //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
          // audio.src=(window.URL||webkitURL).createObjectURL(blob);
          // audio.play();
          var reader=new FileReader();
          reader.onloadend=()=>{
            var voiceRes = reader.result;
            var VoiceData = voiceRes.substring(voiceRes.indexOf(",") + 1);
            console.log(VoiceData)
            var s = { "engine_type": "sms-5s16k", "aue": "raw" };
            var x_appid = "*******"; 
            var x_param = base64.encode(JSON.stringify(s))
            var x_header = { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" ,"X-Appid": x_appid, "X-Param": x_param };
            // console.log("x_param====", base64);
            axios.post(
            "/vioceToText/", //这里调用科大讯飞语音转写服务
            querystring.stringify({
              audio: "/vioceToText/"
            }),
            {
              headers: x_header
            }
          ).then(res => {       
            this.getAnswers(res.data.data)
          })
          .catch(err => {
            console.log(err);
          });
          };
        reader.readAsDataURL(blob);
      },function(msg){
          console.log("录音失败:"+msg);
          // this.rec.close();//可以通过stop方法的第3个参数来自动调用close
          // this.rec=null;
      });
  },
}

3）Nginx配置解决跨域的问题

location /vioceToText/ {
            proxy_pass  https://xx.xx.xxx.xx/; 科大讯飞语音转写服务url
        }

4）兼容性问题

经过测试，说一下兼容性问题，兼容性问题主要在于mediaDevices.getUserMedia（）方法，
1.ios手机：

在http环境下，在微信端打开，不弹任何东西；

在https环境下，在微信端打开，不弹任何东西

在http环境下，在safari中打开，走catch方法，分别弹（NotAllowedError）（The request is not allowed by the user agent or the plateform in the current context，possibly because the user denied permission）；

在https环境下，在safari中打开，直接弹是否想要访问麦克风，说明调起麦克风成功

2.安卓手机（Android X5内核）：

在http环境下，在微信端打开，走catch方法，分别弹（NotSupportedError）（only secure origins are allowed（see： https://goo.gl/YOZkNV））；

在https环境下，在微信端打开，直接弹是否想要访问麦克风，说明调起麦克风成功

在http环境下，在google中打开，走catch方法，分别弹（PermissionDeniedError）（）；

在https环境下，在goole中打开，直接弹是否想要访问麦克风，说明调起麦克风成功