zoukankan      html  css  js  c++  java
  • 微信小程序录音

    wx.getUserInfo(object)

    在微信小程序的官方文档中有提出,此接口有调整,使用该接口将不再出现授权弹窗,请使用<button open-type=”getUserInfo”></button>引导用户主动进行授权,我把授权放在了用户第一次操作的按钮上。

    在用户第一次登陆的时候,渲染授权按钮。当storage中已经存有openid的时候,渲染录音按钮

    <!-- 用户授权按钮 -->
    <button class='mike' wx:if="{{userInfo}}" hover-class='curStyle' open-type='getUserInfo' bindgetuserinfo='login'></button>
    <!-- 录音按钮 -->
    <button class='mike' wx:if="{{record}}" hover-class='curStyle' bindtouchstart='startHandel' bindtouchend='endHandle'></button> 

    交互逻辑:当用户按下按钮时,显示loading提示框(开始录音),松开时,隐藏loading并开始正在努力搜索的提示框,上传录制的音频成功,跳转到搜索结果页。

    绑定的事件:bindtouchstart(手指触摸动作开始)和bindtouchend(手指触摸动作结束)。当组件触发事件时,会收到一个事件对象,其中有timeStamp,事件生成时的事件戳。两个事件分别记录开始录音时间startTime和结束录音时间endTime,因为用户不知道长按录音还是仅点击开始录音,当用户短按的时候即endTime - startTime<350时,提示说话时间太短,来引导长按才是开始录音

    录音管理器getRecorderManager

    用到getRecorderManager的start开始录音方法和stop停止录音方法,比较坑的是用到start方法时,第一次录音的用户会自动弹出要使用你的录音功能,是否允许?这样会影响到识别松开按钮这个动作,所以我用一个recordStatus录音授权的状态来控制。

    当recordStatus为false时,只向用户发起录音的请求,而不做其他的操作

    当recordStatus为true时,按下按钮开始录音,松开按钮正在努力搜索......

    //按下按钮
        startHandel: function (e) {
                var that = this;
                var startTime = e.timeStamp;
                var recordStatus = that.data.recordStatus;
                if (!recordStatus){
                  wx.getSetting({
                    success(res) {
                      if (!res.authSetting['scope.record']) {
                        wx.authorize({
                          scope: 'scope.record',
                          success() {
                            recordStatus=true;
                            that.setData({
                              recordStatus: recordStatus
                            })
                          }
                        })
                      }
                    }
                  })
                }else{
                  //记录开始录音时间
                  that.setData({
                    startTime: startTime
                  })
                  wx.showLoading({
                    title: '开始录音',
                    mask: true
                  })
                  recorderManager.onStart(() => {
                    console.log('recorder start')
                  })
                  const options = {
                    duration: 10000,
                    sampleRate: 44100,
                    numberOfChannels: 1,
                    encodeBitRate: 96000,
                    format: 'mp3',
                    frameSize: 50
                  }
                  recorderManager.start(options);
                }
         
        },
        //松开按钮
        endHandle: function (e) {
                  var that = this;
                  var recordStatus = that.data.recordStatus;
                  console.log(recordStatus);
                  if (recordStatus){
                    var endTime = e.timeStamp;
                    var speakTime = endTime-that.data.startTime;
                    //如果录音时间太短,提示
                    if (speakTime < 350 ){
                      wx.showToast({
                        title: '说话时间太短',
                        icon: 'none',
                      })
                      recorderManager.stop();
                    }else{ 
                              wx.hideLoading();
                              wx.showToast({
                                  title: '正在努力搜索',
                                  icon: 'loading',
                                  duration: 6000,
                                  mask: true
                              })
                              recorderManager.onStop((res) => {
                                  const { tempFilePath } = res;
                                      //上传录制的音频
                                      wx.uploadFile({                                                                   url:'https://cookbook.cityshop.com.cn/index.php?r=product/tune',
                                          filePath: tempFilePath,
                                          name: 'viceo',
                                          success: function (res) {
                                              wx.hideToast();
                                              //如果为空
                                              if (res.statusCode!=500){
                                                that.wxSearchAddHisKey(res.data);
                                              }
                                              if (speakTime >= 350){
                                                wx.navigateTo({
                                                  url: '../result/result?searchValue=' + res.data
                                                })
                                              }
                                          }
                                  })
                              })
                              //触发录音停止
                              recorderManager.stop();
                    }
                  }
        },

     

  • 相关阅读:
    webpack-dev-server坑
    项目问题整理(it)
    webupload在IE9-出现的问题解决
    layer close 关闭层IE9-浏览器崩溃问题解决
    Navicat Premium试用期破解方法(转)
    Navicat试用期破解方法(转)
    关于树莓派Pi2通过UART连接攀藤G5传感器的python
    关于Unicode转为str的方法
    python利用wxpy监控微信公众号
    Android app与PC端交互
  • 原文地址:https://www.cnblogs.com/liuqianrong/p/9154350.html
Copyright © 2011-2022 走看看