首先整理一下思路：
1、认证后的微信公众号，设置项目域名绑定为微信JS安全域
2、使用微信JS编写录音事件，包括开始录音、停止录音、上传录音、服务器保存录音
3、后台负责微信JS签名生成，从微信服务器上下载录制好的音频
4、录音格式为amr文件，使用amr.js编码在线播放
微信开发文档地址：https://mp.weixin.qq.com/wiki
第一步，设置微信公众号JS安全域
需要下载JS安全域凭证文件放在安全域名的根目录下。
第二步，微信JS签名生成
@微信要求生成签名的逻辑必须在服务端完成
签名算法：（jsapi_ticket的获取方式参考微信开发文档）
jsapi_ticket（微信JS接口凭证）+noncestr（服务端生成随机字符串）+timestamp（请求时间戳）+url（请求页面的地址）
①将这些参数名进行ASCII码从小到大排序 sort(array $data);
②按照（key1=value1&key2=value2&key3...）格式组装成字符串
③对字符串sha1加密获得 signature $signature = sha1($str);
注意：access_token 与 jsapi_ticket 的有效时间为7200s，重新获取会生成新的凭证覆盖并消耗微信接口请求次数，注意缓存。
附上签名生成demo：
第三步，页面配置微信JS
引入微信JS
开启微信JS组件
$.post("./sign.php","url="+window.location.href,function(res){
token = res.token;
wx.config({
debug: true,//true显示提示消息，false隐藏提示消息
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.noncestr,
signature: res.sign,
jsApiList: ['startRecord','stopRecord','uploadVoice','downloadVoice'] //接口列表
});
//微信JS接口准备就绪时，所有接口逻辑在此方法内实现
wx.ready(function(){
$("#radio_start").on("click",function(event){//开始录音
wx.startRecord({
success: function(){
localStorage.rainAllowRecord = 'true';
},
cancel: function () {
alert('not radio driver');
}
});
});
$("#radio_stop").on("click",function(event){//结束录音
wx.stopRecord({
success: function (res) {
localId = res.localId;
//locaId为本地语音标识
radio_file_up();
$("#radio_stop").append("¼Òô"+localId+"
");
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res);
});
},"json");
上传语音文件到微信服务器（微信服务器只对文件保存两天，上传成功后下载到服务器保存）
function radio_file_up(){
wx.uploadVoice({
localId: localId, // 本地微信语音文件标识
isShowProgressTips: 1, // 开启上传提示
success: function (res) {
//上传成功后从微信服务器下保存
var url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+token+"&media_id="+res.serverId;
// $.post("./download.php","url="+url,function(res){
// alert("上传成功");
// },"json");
},
error:function(res){
alert(res);
}
});
}
第四步，服务器保存语音文件
第五步，如何在web播放amr格式的音频文件
一共发现了三个方案：
① 使用apple的quickTimePlayer播放器的插件实现播放
② 将amr文件进行base64转码播放，有flash实现和amr插件播放实现
因为时间紧张的原因选择最简单的amr转码播放的方法
参考技术博客：http://www.cnblogs.com/yuhongda0315/p/5224064.html
使用amr.js开源库 git地址：https://github.com/jpemartins/amr.js
demo下载地址：http://pan.baidu.com/s/1cEojoi
功能实现后发现的问题
1、微信JS签名生成时要注意请求发送的url是否正确，微信公众号上下载的凭证文件没有放在根目录下也会提示签名错误。
2、调试使用微信web开发者工具会提高效率
3、录音文件经过base64转码amr.js播放后音频会有一定比例损失，后期再仔细研究amr.js无损方法。