H5端实现语音识别

李湘湘

于 2025-03-24 17:02:28 发布

阅读量231

点赞数 10

文章标签：语音识别 css css3

本文链接：https://blog.youkuaiyun.com/qq_40255459/article/details/146480097

版权

加粗H5端实现语音识别
PS:样式代码随便写的，主要看功能
html代码

<div class="yuyin_view flex-def flex-zCenter flex-cEnd">
                    <div class="flex-def flex-cCenter flex-zTopBottom">
                        <div class="box1 flex-cCenter flex-def flex-zCenter" @click="yuyinFun($event,true)">
                            <div class="box2 flex-cCenter flex-def flex-zCenter">
                                <div class="box3 flex-cCenter flex-def flex-zCenter">
                                    <div class="box4 flex-cCenter flex-def flex-zCenter">
                                        <img src="./static/images/icon_yuyin.png" alt="" class="img">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text">语音搜索</div>
                    </div>
                </div>
 <!-- 语音搜索弹窗 -->
  <div class="yuyin_bool" v-if="is_yuyin_bool" @click.stop="yuyinFun($event,false)">
    <div>
      <div class="bootom_jiantou flex-zCenter flex-def">
        <div @click.stop="yuyinFun($event,false)">
          <img src="./static/images/icon_bottom.png" />
        </div>
      </div>
      <div class="sousuo_center" v-if="yuyin_center">请说话·</div>
      <div class="sousuo_qian" v-if="!yuyin_center">按住说话</div>
      <div class="sousuo_view flex-zCenter flex-def">
        <div class="quan flex-zCenter flex-def flex-cCenter" :style="yuyin_center?'background:'+yuyin_color_nums+';':''">
          <div class="flex-zCenter flex-def flex-cCenter huatong_view" v-if="client=='wechat'" id="talk" ontouchstart="weixin_touchstart()"  ontouchend="weixin_touchend()" >
            <!--<img src="./static/images/icon_yuyin.png" />-->
            <!--<div class="tuo_div"></div>-->
            <div class="box1 flex-cCenter flex-def flex-zCenter" @click="yuyinFun($event,true)">
                <div class="box2 flex-cCenter flex-def flex-zCenter">
                    <div class="box3 flex-cCenter flex-def flex-zCenter">
                        <div class="box4 flex-cCenter flex-def flex-zCenter">
                            <img src="./static/images/icon_yuyin.png" alt="" class="img">
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="flex-zCenter flex-def flex-cCenter huatong_view" v-else ontouchstart="touchStart()"  ontouchend="touchEnd()">
            <!--<img src="./static/images/icon_yuyin.png" />-->
            <!--<div class="tuo_div"></div>-->
            <div class="box1 flex-cCenter flex-def flex-zCenter" @click="yuyinFun($event,true)">
                <div class="box2 flex-cCenter flex-def flex-zCenter">
                    <div class="box3 flex-cCenter flex-def flex-zCenter">
                        <div class="box4 flex-cCenter flex-def flex-zCenter">
                            <img src="./static/images/icon_yuyin.png" alt="" class="img">
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 语音搜索弹窗end -->

CSS样式代码

.yuyin_view {
  padding-bottom: 95px;
  box-sizing: border-box;
}

.yuyin_view .box1,.huatong_view .box1{
    width: 121px;
    height: 121px;
    border-radius: 50%;
    background-color: rgba(40, 243, 181, .1);
}
.yuyin_view .box2,.huatong_view .box2{
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: rgba(40, 243, 181, .2);
}
.yuyin_view .box3,.huatong_view .box3{
    width: 71px;
    height: 71px;
    border-radius: 50%;
    background-color: rgba(40, 243, 181, .3);
}
.yuyin_view .box4,.huatong_view .box4{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(40, 243, 181, 1);
}
.yuyin_view .img,.huatong_view .img{
    width: 28px;
    height: 28px;
    display: block;
}
.yuyin_view .text{
    margin-top: 20px;
    font-size: 15px;
    color: #000000;
    line-height: 1;
}

.yuyin_bool {
  background: rgba(0, 0, 0, 0.45);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}

.yuyin_bool>div {
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  font-size: 14px;
  color: #BABABA;
  padding-bottom: 40px;
}

.bootom_jiantou>div {
  margin-bottom: 26px;
  text-align: center;
  background: #F7F7F7;
  border-radius: 7px;
  width: 35px;
  height: 14px;
  line-height: 14px;
}

.bootom_jiantou img {
  width: 9px;
  height: 9px;
}

.sousuo_qian {
  margin-bottom: 60px;
  margin-top: 45px;
  text-align: center;
}

.sousuo_center {
  margin-bottom: 90px;
}

.huatong_view {
  border-radius: 50%;
  position: relative;
}
.huatong_view .tuo_div{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    background: transparent;
}
.quan{
  width: 85px;
  height: 85px;
  border-radius: 50%;
}
.search-case{
    padding: 79.5px 28px 0;
    box-sizing: border-box;
}
.search-case .search-img{
    width: 174px;
    height: 27px;
    display: block;
    margin-bottom: 8px;
}
.search-case .search-text{
    font-size: 13px;
    color: #999999;
    line-height: 1;
    margin-bottom: 22.5px;
}
.search-case .search-box{
    padding: 0;
}
.search-case .search-box .input-box{
    height: 44px;
    padding: 0 14.5px;
}
.search-case .search-box .input-box i{
    font-weight: 600;
    color: #000;
}
.search-case .search-box .input-box input::-webkit-input-placeholder{
    color: #666;
}
.search-case .search-box .search-btn{
    padding: 0 0 0 8px;
    color: #333;
    font-size: 17px;
    font-weight: 600;
}

js部分

<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
//语音搜索依赖的js
<script src="./static/js/recorder.js"></script>
var vm = new Vue({
            el: '#app',
            data: {
            client:"wechat",//端口，这里wechat代表微信公众号端
             is_yuyin_bool: false,//语音弹出
    yuyin_center: false,//语音是否搜索中
    yuyin_color_nums: 'rgba(55,126,246,0.26)',
    recorder_recognize:false,//是否开启了语音搜索
     recorder:'',//语音
},
methods: {
//   获取微信配置
get_weixin:function(){
     var view_url = window.location.href;
    $.ajax({
                    type:"post",
                    url:"",//自己填写请求地址
                    data:{
                        customer_id:'',
                        view_url:view_url
                    },
                    success:function(result){
                        var result = JSON.parse(result);
                        console.log('公众号走这里',result);
                        wx.config({
                        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        debug: false,
                        // 必填，公众号的唯一标识
                        appId: result.data.appId,
                        // 必填，生成签名的时间戳
                        timestamp:""+result.data.timestamp,
                        // 必填，生成签名的随机串
                        nonceStr:result.data.nonceStr,
                         // 必填，签名，见附录1
                         signature:result.data.signature,
                         // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                         jsApiList : [  "startRecord","stopRecord","onVoiceRecordEnd","translateVoice" ]
                         });
                      }
                })
},
 // 语音搜索
  yuyinFun: function (e,bool) {
    var that = this;
    console.log('点击了')
     e.preventDefault();
    that.search_word='';
    if (!bool) {
        that.yuyin_center= false
        that.is_yuyin_bool=bool
    }
      
      if(bool&&that.client=='wechat'){
           // 语音微信公众号识别
        wx.ready(function() {
            wx.checkJsApi({
    						jsApiList: ['startRecord', 'stopRecord','translateVoice'],
    						success: function(res) {
    	that.is_yuyin_bool=bool
    						},error:function(){
    						    console.log('不同意开权限')
            $.toast('您拒绝了开启麦克风权限')
    						},
    					});
    					console.log('公众号的语音识别')	       
        });
      }
      if(bool&&that.client!='wechat'){
        Recorder.getPermission().then(()=>{
            console.log('同意开权限')
            that.is_yuyin_bool=bool;
            that.recorder = new Recorder({
    sampleBits: 16,                 // 采样位数
    sampleRate: 44100,              // 采样率
    numChannels: 1,                 // 声道数
    compile: false                   // 是否边录音边编译
});
        },(error)=>{
            console.log('不同意开权限')
            $.toast('您拒绝了开启麦克风权限')
        })
      }
  },
},
created:function(){
this.get_weixin()
},
            })
            //开始录音 公众号端
    let localId;
    function weixin_touchstart(e){
         e = e || event;
        e.preventDefault();
        //开始录音
        wx.ready(function() {
        vm.yuyin_center=true
        wx.startRecord();
        });
    }
    //停止录音接口
    function weixin_touchend(e){
         e = e || event;
         e.preventDefault();//阻止浏览器默认行为
         wx.ready(function() {
       //停止录音接口
       wx.stopRecord({
           success: function(res) {
            console.log('本地录音===',res,res.localId)
               localId = res.localId;
               wx.translateVoice({
                   localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                   isShowProgressTips: 1, // 默认为1，显示进度提示
                   success: function(res) {
                       result = res.translateResult;
                        
                       //去掉最后一个句号
                       result = result.substring( 0, result.length - 1 );
                       result = result.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
              '');
              vm.search_word=result
              if(vm.search_word!=''){
                //   $("#search input").focus();
                  vm.yuyin_center=false
      vm.is_yuyin_bool= false
    //   自动搜索
      //执行搜索功能
              }else{
                  vm.yuyin_center=false
                  vm.is_yuyin_bool= false
                       $.toast('未识别到语音','text')
              }
                    console.log('语音说了啥,手动停止=====',result)
                   },
                   fail: function(res){
                       console.log('错误信息',JSON.stringify(res),res)
                       vm.yuyin_center=false
                       vm.is_yuyin_bool= false
                       $.toast('识别失败','text')
                   },
                   complete: function(res){
                   }
               });
           }
       });
         });
    }
   //监听录音自动停止接口
    wx.ready(function() {
    wx.onVoiceRecordEnd({
        //录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: function(res) {
            localId = res.localId;
            wx.translateVoice({
                localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function(res) {
                    result = res.translateResult;
                     console.log('自动停止的识别成功了么',result)
                    //去掉最后一个句号
                    result = result.substring(0, result.length - 1);
                   result = result.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
              '');
                    vm.search_word=result
                     console.log('语音说了啥,自动停止',result)
      if(vm.search_word!=''){
                //   $("#search input").focus();
                  vm.yuyin_center=false
      vm.is_yuyin_bool= false
     //执行搜索功能
              }else{
                  vm.yuyin_center=false
                       $.toast('识别失败','text')
              }
                }
            });
        }
    });
               
    })
    

        // 语音微信公众号识别end
        
          // 语音搜索h5端
        // 手指按下
  async function touchStart (e) {
    var that = vm;
    console.log('手指按下')
    e = e || event;
    e.preventDefault();
      that.yuyin_center=true
      that.recorder.start().then(()=>{
          console.log('录音开启成功')
      },(error)=>{
          console.log('录音开启失败')
      });
        let count = 60;
      let countdown = setInterval(function () {
      if (count >= 0) {
        count--;
      } else {
        clearInterval(countdown);
        touchEnd(e);
        console.log('超过60秒。强制关闭')
      }
    }, 1000);
  }
  // 手指抬起
  function touchEnd (e) {
    var that = vm;
    console.log('手指抬起')
    e = e || event;
    e.preventDefault();
    // mediaRecorder.stop();
      
      that.recorder.stop();
      let toltime=that.recorder.duration;
      let fileSize=that.recorder.fileSize;
      var wav=that.recorder.getWAVBlob();
      var reader=new FileReader();
      var search='';
      let wavValue='';
      console.log('录音数据===',that.recorder)
      reader.onload=()=>{
          search=reader.result;
          console.log('录音数据====111',reader.result,reader)
          wavValue=search.split("base64,")[1];
          var type=search.split(";base64,")[0];
          type=type.split("data:")[1];
          console.log('语音文件数据===',wavValue,type)
          var formData = new FormData();
                            formData.append("Data",wavValue);
                            formData.append("VoiceFormat",type);
                             $.ajax({
                    url : '上传到后端接口，转换语音',
                    type : 'POST',
                    data : formData,
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    beforeSend:function(){
                    },
                    dataType:'json',
                    success : function(res) {
                        if(res.errcode == 0){
                            console.log('识别成功===',res)
      that.search_word=res.data.Result;
      if(that.search_word!=''){
                //   $("#search input").focus();
                  that.yuyin_center=false
      that.is_yuyin_bool= false
      //执行搜索功能
              }else{
                  that.yuyin_center=false
                  that.is_yuyin_bool= false
                       $.toast('未识别到语音','text')
              }
                        }else{
                            console.log('识别失败===',res)
                             $.toast(res.errmsg, "text");
                             that.yuyin_center=false
                         that.is_yuyin_bool= false
                         that.search_word='';
                        }
                    }
                })
      }
      reader.readAsDataURL(wav);
  }
        // 语音搜索h5端end

语音依赖的js代码

/*!
 * 
 * js-audio-recorder - js audio recorder plugin
 * 
 * @version v1.0.7
 * @homepage https://github.com/2fps/recorder
 * @author 2fps <echoweb@126.com> (https://www.zhuyuntao.cn)
 * @license MIT
 *         
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Recorder=e():t.Recorder=e()}(this,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){"use strict";function i(t,e,n){for(var i=0;i<n.length;i++)t.setUint8(e+i,n.charCodeAt(i))}Object.defineProperty(e,"__esModule",{value:!0}),e.compress=function(t,e,n){for(var i=e/n,o=Math.max(i,1),r=t.left,a=t.right,s=Math.floor((r.length+a.length)/i),u=new Float32Array(s),c=0,l=0;c<s;){var f=Math.floor(l);u[c]=r[f],c++,a.length&&(u[c]=a[f],c++),l+=o}return u},e.encodePCM=function(t,e,n){void 0===n&&(n=!0);var i=0,o=t.length*(e/8),r=new ArrayBuffer(o),a=new DataView(r);if(8===e)for(var s=0;s<t.length;s++,i++){var u=(c=Math.max(-1,Math.min(1,t[s])))<0?128*c:127*c;u=+u+128,a.setInt8(i,u)}else for(s=0;s<t.length;s++,i+=2){var c=Math.max(-1,Math.min(1,t[s]));a.setInt16(i,c<0?32768*c:32767*c,n)}return a},e.encodeWAV=function(t,e,n,o,r,a){void 0===a&&(a=!0);var s=n>e?e:n,u=r,c=new ArrayBuffer(44+t.byteLength),l=new DataView(c),f=o,p=0;i(l,p,"RIFF"),p+=4,l.setUint32(p,36+t.byteLength,a),i(l,p+=4,"WAVE"),i(l,p+=4,"fmt "),p+=4,l.setUint32(p,16,a),p+=4,l.setUint16(p,1,a),p+=2,l.setUint16(p,f,a),p+=2,l.setUint32(p,s,a),p+=4,l.setUint32(p,f*s*(u/8),a),p+=4,l.setUint16(p,f*(u/8),a),p+=2,l.setUint16(p,u,a),i(l,p+=2,"data"),p+=4,l.setUint32(p,t.byteLength,a),p+=4;for(var d=0;d<t.byteLength;)l.setUint8(p,t.getUint8(d)),p++,d++;return l}},function(t,e,n){"use strict";var i,o=this&&this.__extends||(i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)});Object.defineProperty(e,"__esModule",{value:!0});var r=n(2),a=n(0),s=n(3),u=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.isrecording=!1,n.ispause=!1,n.isplaying=!1,n}return o(e,t),e.prototype.setOption=function(t){void 0===t&&(t={}),this.setNewOption(t)},e.prototype.start=function(){return this.isrecording?Promise.reject():(this.isrecording=!0,this.startRecord())},e.prototype.pause=function(){this.isrecording&&!this.ispause&&(this.ispause=!0,this.pauseRecord())},e.prototype.resume=function(){this.isrecording&&this.ispause&&(this.ispause=!1,this.resumeRecord())},e.prototype.stop=function(){this.isrecording&&(this.isrecording=!1,this.ispause=!1,this.stopRecord())},e.prototype.play=function(){this.stop(),this.isplaying=!0,this.onplay&&this.onplay(),s.default.addPlayEnd(this.onplayend);var t=this.getWAV();t.byteLength>44&&s.default.play(t.buffer)},e.prototype.getPlayTime=function(){return s.default.getPlayTime()},e.prototype.pausePlay=function(){!this.isrecording&&this.isplaying&&(this.isplaying=!1,this.onpauseplay&&this.onpauseplay(),s.default.pausePlay())},e.prototype.resumePlay=function(){this.isrecording||this.isplaying||(this.isplaying=!0,this.onresumeplay&&this.onresumeplay(),s.default.resumePlay())},e.prototype.stopPlay=function(){this.isrecording||(this.isplaying=!1,this.onstopplay&&this.onstopplay(),s.default.stopPlay())},e.prototype.destroy=function(){return s.default.destroyPlay(),this.destroyRecord()},e.prototype.getRecordAnalyseData=function(){return this.getAnalyseData()},e.prototype.getPlayAnalyseData=function(){return s.default.getAnalyseData()},e.prototype.getPCM=function(){this.stop();var t=this.getData();return t=a.compress(t,this.inputSampleRate,this.outputSampleRate),a.encodePCM(t,this.oututSampleBits,this.littleEdian)},e.prototype.getPCMBlob=function(){return new Blob([this.getPCM()])},e.prototype.downloadPCM=function(t){void 0===t&&(t="recorder");var e=this.getPCMBlob();r.downloadPCM(e,t)},e.prototype.getWAV=function(){var t=this.getPCM();return a.encodeWAV(t,this.inputSampleRate,this.outputSampleRate,this.config.numChannels,this.oututSampleBits,this.littleEdian)},e.prototype.getWAVBlob=function(){return new Blob([this.getWAV()],{type:"audio/wav"})},e.prototype.downloadWAV=function(t){void 0===t&&(t="recorder");var e=this.getWAVBlob();r.downloadWAV(e,t)},e.prototype.download=function(t,e,n){r.download(t,e,n)},e.prototype.getChannelData=function(){var t=this.getPCM(),e=t.byteLength,n=this.littleEdian,i={left:null,right:null};if(2===this.config.numChannels){var o=new DataView(new ArrayBuffer(e/2)),r=new DataView(new ArrayBuffer(e/2));if(16===this.config.sampleBits)for(var a=0;a<e/2;a+=2)o.setInt16(a,t.getInt16(2*a,n),n),r.setInt16(a,t.getInt16(2*a+2,n),n);else for(a=0;a<e/2;a+=2)o.setInt8(a,t.getInt8(2*a)),r.setInt8(a,t.getInt8(2*a+1));i.left=o,i.right=r}else i.left=t;return i},e}(n(5).default);e.default=u},function(t,e,n){"use strict";function i(t,e,n){var i=document.createElement("a");i.href=window.URL.createObjectURL(t),i.download=e+"."+n,i.click()}Object.defineProperty(e,"__esModule",{value:!0}),e.downloadWAV=function(t,e){void 0===e&&(e="recorder"),i(t,e,"wav")},e.downloadPCM=function(t,e){void 0===e&&(e="recorder"),i(t,e,"pcm")},e.download=function(t,e,n){return i(t,e,n)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),o=null,r=0,a=0,s=null,u=null,c=null,l=!1,f=0,p=function(){};function d(){return l=!1,s.decodeAudioData(c.slice(0),function(t){(o=s.createBufferSource()).onended=function(){l||(f=s.currentTime-a+r,p())},o.buffer=t,o.connect(u),u.connect(s.destination),o.start(0,r),a=s.currentTime},function(t){i.throwError(t)})}function h(){o&&(o.stop(),o=null)}var y=function(){function t(){}return t.play=function(t){return s||(s=new(window.AudioContext||window.webkitAudioContext),(u=s.createAnalyser()).fftSize=2048),this.stopPlay(),c=t,f=0,d()},t.pausePlay=function(){h(),r+=s.currentTime-a,l=!0},t.resumePlay=function(){return d()},t.stopPlay=function(){r=0,c=null,h()},t.destroyPlay=function(){this.stopPlay()},t.getAnalyseData=function(){var t=new Uint8Array(u.frequencyBinCount);return u.getByteTimeDomainData(t),t},t.addPlayEnd=function(t){void 0===t&&(t=function(){}),p=t},t.getPlayTime=function(){var t=l?r:s.currentTime-a+r;return f||t},t}();e.default=y},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.throwError=function(t){throw new Error(t)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0),o=function(){function t(e){void 0===e&&(e={}),this.size=0,this.lBuffer=[],this.rBuffer=[],this.tempPCM=[],this.inputSampleBits=16,this.fileSize=0,this.duration=0,this.needRecord=!0;var n,i=new(window.AudioContext||window.webkitAudioContext);this.inputSampleRate=i.sampleRate,this.setNewOption(e),this.littleEdian=(n=new ArrayBuffer(2),new DataView(n).setInt16(0,256,!0),256===new Int16Array(n)[0]),t.initUserMedia()}return t.prototype.setNewOption=function(t){void 0===t&&(t={}),this.config={sampleBits:~[8,16].indexOf(t.sampleBits)?t.sampleBits:16,sampleRate:~[8e3,11025,16e3,22050,24e3,44100,48e3].indexOf(t.sampleRate)?t.sampleRate:this.inputSampleRate,numChannels:~[1,2].indexOf(t.numChannels)?t.numChannels:1},this.outputSampleRate=this.config.sampleRate,this.oututSampleBits=this.config.sampleBits},t.prototype.startRecord=function(){var t=this;return this.context&&this.destroyRecord(),this.initRecorder(),navigator.mediaDevices.getUserMedia({audio:!0}).then(function(e){t.audioInput=t.context.createMediaStreamSource(e),t.stream=e}).then(function(){t.audioInput.connect(t.analyser),t.analyser.connect(t.recorder),t.recorder.connect(t.context.destination)})},t.prototype.pauseRecord=function(){this.needRecord=!1},t.prototype.resumeRecord=function(){this.needRecord=!0},t.prototype.stopRecord=function(){this.audioInput&&this.audioInput.disconnect(),this.source&&this.source.stop(),this.recorder.disconnect(),this.analyser.disconnect(),this.needRecord=!0},t.prototype.destroyRecord=function(){return this.clearRecordStatus(),this.stopStream(),this.closeAudioContext()},t.prototype.getAnalyseData=function(){var t=new Uint8Array(this.analyser.frequencyBinCount);return this.analyser.getByteTimeDomainData(t),t},t.prototype.getData=function(){return this.flat()},t.prototype.clearRecordStatus=function(){this.lBuffer.length=0,this.rBuffer.length=0,this.size=0,this.fileSize=0,this.PCM=null,this.audioInput=null,this.duration=0},t.prototype.flat=function(){var t=null,e=new Float32Array(0);1===this.config.numChannels?t=new Float32Array(this.size):(t=new Float32Array(this.size/2),e=new Float32Array(this.size/2));for(var n=0,i=0;i<this.lBuffer.length;i++)t.set(this.lBuffer[i],n),n+=this.lBuffer[i].length;n=0;for(i=0;i<this.rBuffer.length;i++)e.set(this.rBuffer[i],n),n+=this.rBuffer[i].length;return{left:t,right:e}},t.prototype.initRecorder=function(){var t=this;this.clearRecordStatus(),this.context=new(window.AudioContext||window.webkitAudioContext),this.analyser=this.context.createAnalyser(),this.analyser.fftSize=2048;var e=this.context.createScriptProcessor||this.context.createJavaScriptNode;this.recorder=e.apply(this.context,[4096,this.config.numChannels,this.config.numChannels]),this.recorder.onaudioprocess=function(e){if(t.needRecord){var n,i=e.inputBuffer.getChannelData(0),o=null;t.lBuffer.push(new Float32Array(i)),t.size+=i.length,2===t.config.numChannels&&(o=e.inputBuffer.getChannelData(1),t.rBuffer.push(new Float32Array(o)),t.size+=o.length),t.fileSize=Math.floor(t.size/Math.max(t.inputSampleRate/t.outputSampleRate,1))*(t.oututSampleBits/8),n=100*Math.max.apply(Math,i),t.duration+=4096/t.inputSampleRate,t.onprocess&&t.onprocess(t.duration),t.onprogress&&t.onprogress({duration:t.duration,fileSize:t.fileSize,vol:n})}}},t.prototype.stopStream=function(){this.stream&&this.stream.getTracks&&(this.stream.getTracks().forEach(function(t){return t.stop()}),this.stream=null)},t.prototype.closeAudioContext=function(){return this.context&&this.context.close&&"closed"!==this.context.state?this.context.close():new Promise(function(t){t()})},t.initUserMedia=function(){void 0===navigator.mediaDevices&&(navigator.mediaDevices={}),void 0===navigator.mediaDevices.getUserMedia&&(navigator.mediaDevices.getUserMedia=function(t){var e=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia;return e?new Promise(function(n,i){e.call(navigator,t,n,i)}):Promise.reject(new Error("浏览器不支持 getUserMedia !"))})},t.prototype.transformIntoPCM=function(t,e){var n=new Float32Array(t),o=new Float32Array(e),r=i.compress({left:n,right:o},this.inputSampleRate,this.outputSampleRate);return i.encodePCM(r,this.oututSampleBits,this.littleEdian)},t.getPermission=function(){return this.initUserMedia(),navigator.mediaDevices.getUserMedia({audio:!0}).then(function(t){t&&t.getTracks().forEach(function(t){return t.stop()})})},t}();e.default=o}]).default});
//# sourceMappingURL=recorder.js.map