• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序录音

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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();
                }
              }
    },

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序实现录音上传发布时间:2022-07-18
下一篇:
微信小程序实现录音格式为mp3,并上传到云开发环境发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap