云娜
今天分享一下我第一次接觸微信開發(fā),微信JS-SDK錄音功能開發(fā)的經(jīng)歷.
在開發(fā)微信JS-SDK錄音功之前我是沒有接觸過微信開發(fā)的,第一反應(yīng)就是去百度.建議第一次接觸微信開發(fā)的同學去微信JSSDK說明文檔 - 微信公眾平臺開發(fā)者文檔上看看,重點是要仔細看微信網(wǎng)頁開發(fā)這一欄,先在頭腦里有個基本了解.別忘了下載微信web開發(fā)者工具,使用方法和介紹也仔細看看.
如果還是感覺一頭霧水的同學可以去看看微信JS-SDK Demo.仔細去看看源碼,和JSSDK說明文檔 - 微信公眾平臺開發(fā)者文檔,微信網(wǎng)頁開發(fā)聯(lián)系起來看,效果更好!
有了以上的了解后就可以動手開發(fā)了,我這里主要講微信JS-SDK錄音功能開發(fā).需要實現(xiàn) : 開始錄音,停止錄音,試聽錄音,刪除錄音重新錄制,確認上傳語音到微信服務(wù)器(語音只能在微信服務(wù)器上保留三天,我還要實現(xiàn)與后臺配合,從微信服務(wù)器上把語音保存到自己的服務(wù)器上).
下面我就直接貼代碼了,只要你有仔細看上面的文檔和Demo,這些代碼對你來說都不是問題.
<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">確認</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的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '',// 必填，公眾號的唯一標識
timestamp: '',// 必填，生成簽名的時間戳
nonceStr: '',// 必填，生成簽名的隨機串
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秒后自動停止;
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('請先錄制一段聲音');
return;
}
wx.playVoice({
localId: voice.localId
});
}
};
//刪除語音,重新錄音;
document.querySelector('#deleteVoice').onclick = function(){
voice.localId = '';
startRecord.innerHTML = '開始';
}
//確認上傳語音
document.querySelector('#uploadVoice').onclick = function () {
if (voice.localId == '') {
alert('請先錄制一段聲音');
return;
}
wx.uploadVoice({
localId: voice.localId,
success: function (res) {
voice.serverId = res.serverId;
//把微信服務(wù)器上的serverId傳給后臺,后臺再通過serverId到微信服務(wù)器上把語音保存到自己服務(wù)器上
$.ajax({
url: '',//后臺接收數(shù)據(jù)地址
dataType: "json",
type: 'get',
data: {'id': voice.serverId},
success: function (msg) {
alert('上傳成功!');
},
});
}
});
};
});
}
</script>
</body>
</html>
網(wǎng)上還有個非常不錯的例子可以提供大家參考微信jssdk錄音功能開發(fā)記錄.
寫好后就可以交給后臺上傳服務(wù)器,再用微信web開發(fā)者工具進行調(diào)試.
最后開發(fā)完成如圖:
微信語音接口
