Vue 调用录音以及录音上传

h5调用调用手机麦克风实现科大讯飞语音转写服务

      • 1)安装
      • 2)代码
      • 3)Nginx配置解决跨域的问题
      • 4)兼容性问题

做一个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中打开,直接弹是否想要访问麦克风,说明调起麦克风成功

你可能感兴趣的:(vue)