今天分享一下我第一次接觸微信開發(fā),微信JS-SDK錄音功能開發(fā)的經(jīng)歷.
在開發(fā)微信JS-SDK錄音功之前我是沒有接觸過(guò)微信開發(fā)的,第一反應(yīng)就是去百度.建議第一次接觸微信開發(fā)的同學(xué)去微信JSSDK說(shuō)明文檔 - 微信公眾平臺(tái)開發(fā)者文檔上看看,重點(diǎn)是要仔細(xì)看微信網(wǎng)頁(yè)開發(fā)這一欄,先在頭腦里有個(gè)基本了解.別忘了下載微信web開發(fā)者工具,使用方法和介紹也仔細(xì)看看.
如果還是感覺一頭霧水的同學(xué)可以去看看微信JS-SDK Demo.仔細(xì)去看看源碼,和JSSDK說(shuō)明文檔 - 微信公眾平臺(tái)開發(fā)者文檔,微信網(wǎng)頁(yè)開發(fā)聯(lián)系起來(lái)看,效果更好!
有了以上的了解后就可以動(dòng)手開發(fā)了,我這里主要講微信JS-SDK錄音功能開發(fā).需要實(shí)現(xiàn) : 開始錄音,停止錄音,試聽錄音,刪除錄音重新錄制,確認(rèn)上傳語(yǔ)音到微信服務(wù)器(語(yǔ)音只能在微信服務(wù)器上保留三天,我還要實(shí)現(xiàn)與后臺(tái)配合,從微信服務(wù)器上把語(yǔ)音保存到自己的服務(wù)器上).
下面我就直接貼代碼了,只要你有仔細(xì)看上面的文檔和Demo,這些代碼對(duì)你來(lái)說(shuō)都不是問(wèn)題.
<html>
<head>
<meta charset="utf-8">
<title>音頻接口</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wxapi_container">
<div class="lbox_close wxapi_form">
<button class="btn btn_primary" id="startRecord">開始</button>
<button class="btn btn_primary" id="deleteVoice">刪除</button>
<button class="btn btn_primary" id="uploadVoice">確認(rèn)</button>
</div>
</div>
<!--引入微信JS-SDK-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//文檔加載完后立即執(zhí)行
window.onload=function(){
wx.config({
debug: true,//開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '',// 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: '',// 必填，生成簽名的時(shí)間戳
nonceStr: '',// 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: ['startRecord','stopRecord','playVoice','uploadVoice']// 必填，需要使用的JS接口列表
});
wx.ready(function () {
var voice = {
localId: '',
serverId: ''
};
var startRecord = document.querySelector('#startRecord');
var stopClearTimeout;
startRecord.onclick = function () {
//開始錄音
if(startRecord.innerHTML == '開始'){
wx.startRecord({
success: function(){
startRecord.innerHTML = '停止';
//30秒后自動(dòng)停止;
stopClearTimeout = setTimeout(function(){
wx.stopRecord({
success: function (res) {
voice.localId = res.localId;
startRecord.innerHTML = '試聽';
}
});
},30000);
},
});
}
//結(jié)束錄音
if(startRecord.innerHTML =='停止'){
wx.stopRecord({
success: function (res) {
clearTimeout(stopClearTimeout);
startRecord.innerHTML = '試聽';
voice.localId = res.localId;
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
//試聽音頻
if(startRecord.innerHTML =='試聽'){
if (voice.localId == '') {
alert('請(qǐng)先錄制一段聲音');
return;
}
wx.playVoice({
localId: voice.localId
});
}
};
//刪除語(yǔ)音,重新錄音;
document.querySelector('#deleteVoice').onclick = function(){
voice.localId = '';
startRecord.innerHTML = '開始';
}
//確認(rèn)上傳語(yǔ)音
document.querySelector('#uploadVoice').onclick = function () {
if (voice.localId == '') {
alert('請(qǐng)先錄制一段聲音');
return;
}
wx.uploadVoice({
localId: voice.localId,
success: function (res) {
voice.serverId = res.serverId;
//把微信服務(wù)器上的serverId傳給后臺(tái),后臺(tái)再通過(guò)serverId到微信服務(wù)器上把語(yǔ)音保存到自己服務(wù)器上
$.ajax({
url: '',//后臺(tái)接收數(shù)據(jù)地址
dataType: "json",
type: 'get',
data: {'id': voice.serverId},
success: function (msg) {
alert('上傳成功!');
},
});
}
});
};
});
}
</script>
</body>
</html>
網(wǎng)上還有個(gè)非常不錯(cuò)的例子可以提供大家參考微信jssdk錄音功能開發(fā)記錄.
寫好后就可以交給后臺(tái)上傳服務(wù)器,再用微信web開發(fā)者工具進(jìn)行調(diào)試.
最后開發(fā)完成如圖:
