微信公众号提供了一个音频接口，可以进行录音、上传、下载、识别等操作。
实现起来也比较简单，跟着文档来就行了。下面的把音频的功能放到了一个文件 里面，直接用即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/weui/css/weui.css"/>
<link rel="stylesheet" href="/static/weui/css/weuix.css"/>
<title>在线录音</title>
</head>
<body>
<div id="status" style="color: red;text-align: center">请操作</div>
<input class="weui-btn weui-btn_default" id="start" type="button" value="录音" />
<input class="weui-btn weui-btn_default" id="stop" type="button" value="停止录制" />
<br>
<input class="weui-btn weui-btn_default" id="play" type="button" value="播放" />
<input class="weui-btn weui-btn_default" id="pause" type="button" value="暂停播放" />
<input class="weui-btn weui-btn_default" id="stopPlay" type="button" value="停止播放" />
<br>
<input class="weui-btn weui-btn_default" id="translate" type="button" value="识别" />
<br>
<input class="weui-btn weui-btn_default" id="upload" type="button" value="上传" />
<input class="weui-btn weui-btn_default" id="download" type="button" value="下载" />
<script type="text/javascript" src="/static/js/jquery2.0.min.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--<script type="text/javascript" src="/static/weui/js/vconsole.min.js"></script>-->
</body>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '{$jsApiConfig.appid}', // 必填，公众号的唯一标识
timestamp: '{$jsApiConfig.timestamp}', // 必填，生成签名的时间戳
nonceStr: '{$jsApiConfig.noncestr}', // 必填，生成签名的随机串
signature: '{$jsApiConfig.signature}',// 必填，签名
jsApiList: [
'startRecord',
'playVoice',
'stopRecord',
'stopVoice',
'pauseVoice',
'onVoicePlayEnd',
'onVoiceRecordEnd',
'uploadVoice',
'downloadVoice',
'translateVoice',
] // 必填，需要使用的JS接口列表
});
var localId;
var serverId;
var timer;
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
//监听语音播放完毕接口
wx.onVoicePlayEnd({
success: function (res) {
localId = res.localId; // 返回音频的本地ID
$("#status").html('录音完毕')
if (timer){
clearInterval(timer)
}
}
});
wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
localId = res.localId;
$("#status").html('录音时间已达上限');
if (timer){
clearInterval(timer)
}
}
});
$("#start").click(function () {
wx.startRecord();
var i=1;
timer = setInterval(function(){
$("#status").html('已录制'+i+'秒，还可以录制'+(60-i)+'秒');
i++;
if (i===60){
clearInterval(timer);
}
}, 1000)
});
$("#stop").click(function () {
if (timer){
clearInterval(timer)
}
wx.stopRecord({
success: function (res) {
localId = res.localId;
$("#status").html('录音已停止')
console.log(res)
}
});
});
$("#play").click(function () {
$("#status").html('录音播放中');
wx.playVoice({
localId: localId
});
});
$("#stopPlay").click(function () {
$("#status").html('录音已停止播放')
wx.stopVoice({
localId: localId // 需要停止的音频的本地ID，由stopRecord接口获得
});
});
$("#pause").click(function () {
$("#status").html('录音播放已暂停')
wx.pauseVoice({
localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得
});
});
$("#download").click(function () {
wx.downloadVoice({
serverId: serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
localId = res.localId; // 返回音频的本地ID
console.log('下载',res);
}
});
});
//翻译
$("#translate").click(function () {
$("#status").html('语音识别中....')
wx.translateVoice({
localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
$("#status").html('识别结果：'+res.translateResult)
//alert(res.translateResult); // 语音识别的结果
}
});
});
////上传语音有效期3天，可用微信多媒体接口下载语音到自己的服务器，此处获得的 serverId 即 media_id，参考文档 .目前多媒体文件下载接口的频率限制为10000次/天，如需要调高频率，请登录微信公众平台，在开发 - 接口权限的列表中，申请提高临时上限。
$("#upload").click(function () {
wx.uploadVoice({
localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
serverId = res.serverId; // 返回音频的服务器端ID
console.log('上传',res)
$("#status").html('录音上传中...')
$.ajax({
url:"{:url('get_file')}",
data:{
serverId:serverId
},
dataType:'json',
success:function (res) {
$("#test").attr('scr',res.file.url)
console.log('up',res)
$("#status").html('上传操作完成，可以继续新的录音')
}
})
}
});
});
});
</script>
</html>效果如下（未做css修饰）:
