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

Posted 2020-12-19 悟空dong

官方文档必须首当其冲 

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);
                        //     }
                        // });

                    }
                });
            }