vue项目-android版本引入微信录音

最新推荐文章于 2023-12-25 17:31:38 发布

PiscesXu

最新推荐文章于 2023-12-25 17:31:38 发布

阅读量290

点赞数

分类专栏：前端 wechart 文章标签： vue

本文链接：https://blog.csdn.net/PiscesXu/article/details/109203333

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

wechart

1 篇文章 0 订阅

订阅专栏

项目引入微信JSSDK

npm install weixin-js-sdk

在录制音频的页面中引入微信JSSDK

import wx from 'weixin-js-sdk'

该页面需要进行微信端验证→config接口注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [
			 'startRecord',
              'stopRecord',
              'onVoiceRecordEnd',
              'uploadVoice',
              'playVoice',
              'stopVoice',
              'onVoicePlayEnd'
	] // 必填，需要使用的JS接口列表
});

通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
点击按钮开始→或者录音时间超过一分钟没有停止的时候会执行 complete 回调

 wx.startRecord({
        success: function() {
          // alert('成功调起录音')
          that.timer = setInterval(() => {
            // 60秒监听，录音时间超过一分钟没有停止的时候会执行
            if (that.time < 60000){
              that.time++
              wx.onVoiceRecordEnd({
                // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                complete: function(res) {
                  alert('60秒停止录音')
                  // 通过localId获取serverId
                  clearInterval(that.timer)
                  that.tabStatus = 1
                  that.audioUploadStatus = 0
                  wx.uploadVoice({
                    localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                      that.form.mediaId = res.serverId; // 返回音频的服务器端ID
                      that.audioTime = (that.time / 100)
                      that.audioUploadStatus = 1
                    },
                    error: function () {
                      that.audioUploadStatus = 2
                    }
                  })
                }
              })
            }
          }, 1000)
        },
        cancel: function() {
          alert('用户拒绝授权录音')
        }
      })

释放按钮，结束录音，获取本地的音频id→上传音频，获取服务器的id.serverId = media_id(该字段为保存笔记信息接口内media_id音频字段)

 wx.stopRecord({
        success: function (res) {
          that.localId = res.localId
          that.tabStatus = 1
          // 结束录音的时候，停止计时
          clearInterval(that.timer)
          that.audioUploadStatus = 0
          wx.uploadVoice({
            localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
              that.form.mediaId = res.serverId; // 返回音频的服务器端ID
              that.audioTime = (that.time / 100)
              that.audioUploadStatus = 1
            },
            error: function () {
              that.audioUploadStatus = 2
            }
          })
        }
      })