vue 公眾號H5 使用微信JSAPI 錄音 完整齊全

官方文檔必須首當其沖 

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

                    }
                });
            }