云娜

今天分享一下我第一次接触微信开发,微信JS-SDK录音功能开发的经历.

在开发微信JS-SDK录音功之前我是没有接触过微信开发的,第一反应就是去百度.建议第一次接触微信开发的同学去微信JSSDK说明文档 - 微信公众平台开发者文档上看看,重点是要仔细看微信网页开发这一栏,先在头脑里有个基本了解.别忘了下载微信web开发者工具,使用方法和介绍也仔细看看.

有了以上的了解后就可以动手开发了,我这里主要讲微信JS-SDK录音功能开发.需要实现 : 开始录音,停止录音,试听录音,删除录音重新录制,确认上传语音到微信服务器(语音只能在微信服务器上保留三天,我还要实现与后台配合,从微信服务器上把语音保存到自己的服务器上).

下面我就直接贴代码了,只要你有仔细看上面的文档和Demo,这些代码对你来说都不是问题.

音频接口

//文档加载完后立即执行

window.οnlοad=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('上传成功!');

},

});

}

});

};

});

}

网上还有个非常不错的例子可以提供大家参考微信jssdk录音功能开发记录.

写好后就可以交给后台上传服务器,再用微信web开发者工具进行调试.

最后开发完成如图:

微信语音接口