官方文檔必須首當其沖?
首先H5錄音功能的話 對于普通H5網(wǎng)上是有很多的方法 插件? 但是兼容性很差 特別是對于ios 一開始想的是用H5 做個通用的 但是一圈下來 發(fā)現(xiàn)兼容性就很難受??
好在項目是基于微信公眾號 放棄使用普通H5的想法 轉(zhuǎn)戰(zhàn)使用微信提供的 JSAPI 錄音功能 一下子解決了兼容的問題 微信已經(jīng)幫忙處理完畢?
接下來說一下 注意事項??
在使用微信提供的錄音功能前
1.首先的是進入微信公眾號后臺 公眾號設(shè)置的功能設(shè)置?里填寫“JS接口安全域名” 一定要記得?
2.先引入微信JS 簡單的?
http://res.wx.qq.com/open/js/jweixin-1.6.0.js">（https://res.wx.qq.com/open/js/jweixin-1.6.0.js）
3.注冊微信配置 使用wx.config()? ?將要使用的api 填寫到j(luò)sApiList里面 要記得?
注意：簽名問題 一是服務(wù)端算法問題 二是前端當前地址和請求的地址不同 也會出現(xiàn)簽名錯誤? 關(guān)于簽名問題 其他文章也有說明產(chǎn)生的原因
錄音功能 不是立即使用 所以 只需檢測是否配置環(huán)境成功即可 wx.ready()..等回調(diào)方法
.js 配置注冊微信環(huán)境代碼示例
export async function wechatSharefund (columnInfo) {
? const data = await wechatConfig(location.href.split('#')[0]) // 返回的微信信息
? console.log(data)
? if (data.code === 0) {
? ? // 注冊
? ? wx.config({
? ? ? debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)罪治，可以在pc端打開汁尺，參數(shù)信息會通過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 () {
? ? ? ? ? // 設(shè)置成功
? ? ? ? }
? ? ? })
? ? ? 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('結(jié)束錄音')
? ? ? if (this.localId) {
? ? ? ? return
? ? ? }
? ? ? let that = this
? ? ? clearInterval(this.timer)
? ? ? wx.stopRecord({
? ? ? ? success: function (res) {
? ? ? ? ? // 結(jié)束后的代碼處理
? ? ? ? }
? ? ? })
? ? }
?最后 會涉及到 保存錄音 及 上傳到自己服務(wù)器動作 簡單的 使用相對于的API
微信臨時素材返回的是speex文件 需要解碼成想要的播放MAP3或者wav 前端可直接播放的鏈接 解碼微信有提供方法?
uploadVoice() {
? ? ? ? ? ? ? ? let that = this
? ? ? ? ? ? ? ? // 上傳到微信為臨時素材
? ? ? ? ? ? ? ? wx.uploadVoice({
? ? ? ? ? ? ? ? ? ? localId: this.localId, // 需要上傳的音頻的本地ID米绕，由stopRecord接口獲得
? ? ? ? ? ? ? ? ? ? isShowProgressTips: 1, // 默認為1瑟捣，顯示進度提示
? ? ? ? ? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? ? ? ? ? // 獲得微信服務(wù)端音頻ID
? ? ? ? ? ? ? ? ? ? ? ? var serverId = res.serverId; // 返回音頻的服務(wù)器端ID
? ? ? ? ? ? ? ? ? ? ? ? console.log(res)
? ? ? ? ? ? ? ? ? ? ? ? // 服務(wù)端提供接口 傳遞 音頻ID 由服務(wù)端處理從微信服務(wù)端下載臨時素材 存為自己的服務(wù)器鏈接
? ? ? ? ? ? ? ? ? ? ? ? // http請求方式: GET,https調(diào)用 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', // 服務(wù)端提供的接口鏈接
? ? ? ? ? ? ? ? ? ? ? ? //? ? type: 'GET',
? ? ? ? ? ? ? ? ? ? ? ? //? ? dataType: "json",
? ? ? ? ? ? ? ? ? ? ? ? //? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? //? ? ? ? alert('文件已經(jīng)保存到自己的服務(wù)器');
? ? ? ? ? ? ? ? ? ? ? ? //? ? },
? ? ? ? ? ? ? ? ? ? ? ? //? ? error: function (xhr, errorType, error) {
? ? ? ? ? ? ? ? ? ? ? ? //? ? ? ? console.log(error);
? ? ? ? ? ? ? ? ? ? ? ? //? ? }
? ? ? ? ? ? ? ? ? ? ? ? // });
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
