云娜
今天分享一下我第一次接触微信开发,微信JS-SDK录音功能开发的经历.
在开发微信JS-SDK录音功之前我是没有接触过微信开发的,第一反应就是去百度.建议第一次接触微信开发的同学去微信JSSDK说明文档 - 微信公众平台开发者文档上看看,重点是要仔细看微信网页开发这一栏,先在头脑里有个基本了解.别忘了下载微信web开发者工具,使用方法和介绍也仔细看看.
如果还是感觉一头雾水的同学可以去看看微信JS-SDK Demo.仔细去看看源码,和JSSDK说明文档 - 微信公众平台开发者文档,微信网页开发联系起来看,效果更好!
有了以上的了解后就可以动手开发了,我这里主要讲微信JS-SDK录音功能开发.需要实现 : 开始录音,停止录音,试听录音,删除录音重新录制,确认上传语音到微信服务器(语音只能在微信服务器上保留三天,我还要实现与后台配合,从微信服务器上把语音保存到自己的服务器上).
下面我就直接贴代码了,只要你有仔细看上面的文档和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>
//文档加载完后立即执行
window.onload=function(){
wx.config({
debug: true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过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);
},
});
}
//结束录音
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;
//把微信服务器上的serverId传给后台,后台再通过serverId到微信服务器上把语音保存到自己服务器上
$.ajax({
url: '',//后台接收数据地址
dataType: "json",
type: 'get',
data: {'id': voice.serverId},
success: function (msg) {
alert('上传成功!');
},
});
}
});
};
});
}
</script>
</body>
</html>
网上还有个非常不错的例子可以提供大家参考微信jssdk录音功能开发记录.
写好后就可以交给后台上传服务器,再用微信web开发者工具进行调试.
最后开发完成如图:
微信语音接口
