vue 微信录音倒计时_vue 公众号H5 使用微信JSAPI 录音 完整齐全
官方文檔必須首當(dāng)其沖
首先H5錄音功能的話 對(duì)于普通H5網(wǎng)上是有很多的方法 插件? 但是兼容性很差 特別是對(duì)于ios 一開(kāi)始想的是用H5 做個(gè)通用的 但是一圈下來(lái) 發(fā)現(xiàn)兼容性就很難受
好在項(xiàng)目是基于微信公眾號(hào) 放棄使用普通H5的想法 轉(zhuǎn)戰(zhàn)使用微信提供的 JSAPI 錄音功能 一下子解決了兼容的問(wèn)題 微信已經(jīng)幫忙處理完畢
接下來(lái)說(shuō)一下 注意事項(xiàng)
在使用微信提供的錄音功能前
1.首先的是進(jìn)入微信公眾號(hào)后臺(tái) 公眾號(hào)設(shè)置的功能設(shè)置?里填寫(xiě)“JS接口安全域名” 一定要記得
2.先引入微信JS 簡(jiǎn)單的
//(https://res.wx.qq.com/open/js/jweixin-1.6.0.js)
3.注冊(cè)微信配置 使用wx.config()? ?將要使用的api 填寫(xiě)到j(luò)sApiList里面 要記得
注意：簽名問(wèn)題 一是服務(wù)端算法問(wèn)題 二是前端當(dāng)前地址和請(qǐng)求的地址不同 也會(huì)出現(xiàn)簽名錯(cuò)誤? 關(guān)于簽名問(wèn)題 其他文章也有說(shuō)明產(chǎn)生的原因
錄音功能 不是立即使用 所以 只需檢測(cè)是否配置環(huán)境成功即可 wx.ready()..等回調(diào)方法
.js 配置注冊(cè)微信環(huán)境代碼示例
export async functionwechatSharefund (columnInfo) {
const data= await wechatConfig(location.href.split('#')[0]) //返回的微信信息
console.log(data)if (data.code === 0) {//注冊(cè)
wx.config({
debug:false, //開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: data.data.appId, //必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: data.data.timestamp, //必填，生成簽名的時(shí)間戳
nonceStr: data.data.nonceStr, //必填，生成簽名的隨機(jī)串
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:'我是自定義首頁(yè)！！！！！好友' +store.getters.doctorId,
desc:'自定義描述', //分享描述
link: 'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'', //分享圖標(biāo)
success: function() {//設(shè)置成功
}
})
wx.updateTimelineShareData({
title:"我是自定義首頁(yè)！！圈" +store.getters.doctorId,
link:'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'',
success:function() {
}
});
});//是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['startRecord'], //需要檢測(cè)的JS接口列表，所有JS接口列表見(jiàn)附錄2,
success: function(res) {
console.log([res,'114'])
store.commit('jsApiList', res)//以鍵值對(duì)的形式返回，可用的api值true，不可用為false
//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
})
wx.error(function(res){
console.log(res)
})
}
在使用的地方 引入.j文件
import { wechatSharefund } from '.js'mounted () {
wechatSharefund()
}
使用簡(jiǎn)單的
touchstart () {
console.log('開(kāi)始錄音')if (this.localId) {return}
let that= thiswx.startRecord({
success:function(e){//開(kāi)始錄音的代碼處理
},
cancel:function(e) {
console.log(e)
}
})
},
touchend () {
console.log('結(jié)束錄音')if (this.localId) {return}
let that= thisclearInterval(this.timer)
wx.stopRecord({
success:function(res) {//結(jié)束后的代碼處理
}
})
}
最后 會(huì)涉及到 保存錄音 及 上傳到自己服務(wù)器動(dòng)作 簡(jiǎn)單的 使用相對(duì)于的API
微信臨時(shí)素材返回的是speex文件 需要解碼成想要的播放MAP3或者wav 前端可直接播放的鏈接 解碼微信有提供方法
uploadVoice() {
let that= this
//上傳到微信為臨時(shí)素材
wx.uploadVoice({
localId:this.localId, //需要上傳的音頻的本地ID，由stopRecord接口獲得
isShowProgressTips: 1, //默認(rèn)為1，顯示進(jìn)度提示
success: function(res) {//獲得微信服務(wù)端音頻ID
var serverId = res.serverId; //返回音頻的服務(wù)器端ID
console.log(res)//服務(wù)端提供接口 傳遞 音頻ID 由服務(wù)端處理從微信服務(wù)端下載臨時(shí)素材 存為自己的服務(wù)器鏈接
//http請(qǐng)求方式: GET,https調(diào)用 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 請(qǐng)求示例(示例為通過(guò)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);
//}
//});
}
});
}
總結(jié)
以上是生活随笔為你收集整理的vue 微信录音倒计时_vue 公众号H5 使用微信JSAPI 录音 完整齐全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Linux的发行版本及不同版本的联系和区
- 下一篇： Electron + vite + vu