vue 公众号H5 使用微信JSAPI 录音完整齐全

时间：2020-08-11 15:48:34 收藏：0 阅读：107

官方文档必须首当其冲

1.微信jsAPI 录音文档

2.获取微信临时素材文档

首先H5录音功能的话对于普通H5网上是有很多的方法插件但是兼容性很差特别是对于ios 一开始想的是用H5 做个通用的但是一圈下来发现兼容性就很难受

好在项目是基于微信公众号放弃使用普通H5的想法转战使用微信提供的 JSAPI 录音功能一下子解决了兼容的问题微信已经帮忙处理完毕

接下来说一下注意事项

在使用微信提供的录音功能前

1.首先的是进入微信公众号后台公众号设置的功能设置里填写“JS接口安全域名” 一定要记得

2.先引入微信JS 简单的

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> //（https://res.wx.qq.com/open/js/jweixin-1.6.0.js）

3.注册微信配置使用wx.config() 将要使用的api 填写到jsApiList里面要记得

注意：签名问题一是服务端算法问题二是前端当前地址和请求的地址不同也会出现签名错误关于签名问题其他文章也有说明产生的原因

录音功能不是立即使用所以只需检测是否配置环境成功即可 wx.ready()..等回调方法

.js 配置注册微信环境代码示例

export async function wechatSharefund (columnInfo) {
  const data = await wechatConfig(location.href.split(‘#‘)[0]) // 返回的微信信息
  console.log(data)
  if (data.code === 0) {
    // 注册
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.data.appId, // 必填，公众号的唯一标识
      timestamp: data.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
      signature: data.data.signature, // 必填，签名
      jsApiList: [
        ‘updateAppMessageShareData‘,
        ‘updateTimelineShareData‘,
        ‘startRecord‘,
        ‘stopRecord‘,
        ‘playVoice‘,
        ‘onVoiceRecordEnd‘,
        ‘uploadVoice‘,
        ‘onVoicePlayEnd‘,
        ‘downloadVoice‘
      ] // 必填，需要使用的JS接口列表
    })
    // 是否成功
    wx.ready(function(res) {
      console.log([res, 90])
      wx.updateAppMessageShareData({ 
        title: ‘我是自定义首页！！！！！好友‘ + store.getters.doctorId,
        desc: ‘自定义描述‘, // 分享描述
        link: ‘https://doctor.taiori.com/doctor/hospitalIndex?userParam=‘ + store.getters.doctorId,
        imgUrl: ‘‘, // 分享图标
        success: function () {
          // 设置成功
        }
      })
      wx.updateTimelineShareData({
        title: "我是自定义首页！！圈" + store.getters.doctorId,
        link: ‘https://doctor.taiori.com/doctor/hospitalIndex?userParam=‘ + store.getters.doctorId,
        imgUrl: ‘‘,
        success: function() {
        }
      });
      
    });
    // 是否支持指定JS接口
    wx.checkJsApi({
      jsApiList: [‘startRecord‘], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function (res) {
      console.log([res, ‘114‘])
      store.commit(‘jsApiList‘, res)
      // 以键值对的形式返回，可用的api值true，不可用为false
      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    })
    wx.error(function(res){
      console.log(res)
    })
  }

在使用的地方引入.j文件

import { wechatSharefund } from ‘.js‘
mounted () {
  wechatSharefund()
}

使用简单的

   touchstart () {
      console.log(‘开始录音‘)
      if (this.localId) {
        return
      }
      let that = this
      wx.startRecord({
        success: function(e){
            // 开始录音的代码处理
        },
        cancel: function (e) {
            console.log(e)
        }
      })
    },
    touchend () {
      console.log(‘结束录音‘)
      if (this.localId) {
        return
      }
      let that = this
      clearInterval(this.timer)
      wx.stopRecord({
        success: function (res) {
          // 结束后的代码处理
        }
      })
    }

最后会涉及到保存录音及上传到自己服务器动作简单的使用相对于的API

微信临时素材返回的是speex文件需要解码成想要的播放MAP3或者wav 前端可直接播放的链接解码微信有提供方法

uploadVoice() {
                let that = this
                // 上传到微信为临时素材
                wx.uploadVoice({
                    localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        // 获得微信服务端音频ID
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        console.log(res)
                         // 服务端提供接口 传递 音频ID 由服务端处理从微信服务端下载临时素材 存为自己的服务器链接 
                        // http请求方式: GET,https调用 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 请求示例（示例为通过curl命令获取多媒体文件） 
                        // curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
                        // $.ajax({
                        //     url: ‘https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID‘, // 服务端提供的接口链接
                        //     type: ‘GET‘,
                        //     dataType: "json",
                        //     success: function (data) {
                        //         alert(‘文件已经保存到自己的服务器‘);
                        //     },
                        //     error: function (xhr, errorType, error) {
                        //         console.log(error);
                        //     }
                        // });

                    }
                });
            }

vue 公众号H5 使用微信JSAPI 录音 完整齐全

vue 公众号H5 使用微信JSAPI 录音完整齐全