网上查了很多资料,自己在总结一下,感谢各位大佬提供的资料。
页面
<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>
<script>
//文档加载完后立即执行
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '{$sign["appId"]}', // 必填,公众号的唯一标识
timestamp: {$sign['timestamp']}, // 必填,生成签名的时间戳
nonceStr: '{$sign["nonceStr"]}', // 必填,生成签名的随机串
signature: '{$sign["signature"]}',// 必填,签名
jsApiList: [
"startRecord",
"stopRecord",
"onVoiceRecordEnd",
"playVoice",
"pauseVoice",
"stopVoice",
"onVoicePlayEnd",
"uploadVoice",
"downloadVoice",]// 必填,需要使用的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, // 本地微信语音文件标识
isShowProgressTips: 1, // 开启上传提示
success: function (res) {
//上传成功后从微信服务器下保存
voice.serverId = res.serverId;
$.ajax({
url: '/mobile/member/luyin.php?action=save',//后台接收数据地址
type: 'post',
data: {'id': voice.serverId},
success: function (msg) {
if(msg == 1){
alert('上传成功!');
}
}
});
},
error:function(res){
alert("上传失败");
}
});
};
});
wx.error(function (res) {
alert("出现错误请重试:"+res.errMsg);
});
</script>
后台接收数据保存部分,使用到了ffmpeg,将amr格式的文件转换为MP3
$id=$_POST['id'];
$now=time();
$url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=$access_token&media_id=$id";
$targetName = DT_ROOT .'/file/upload/123/'.$now.'.amr'; //保存目录,格式为www/wwwroot/http:...../。。.amr;
ob_start();
readfile($url);
$luyin = ob_get_contents();
ob_end_clean();
$size = strlen($luyin);
$fp = fopen($targetName, 'a');
fwrite($fp, $luyin);
fclose($fp);
// 将 amr 文件格式转换成 mp3 格式 ,不需要转换的在这里就结束了,当然了可以写个语句把MP3的路径保存起来,方便调用,下一篇讲一下ffmpeg的安装使用。
$amrFile = DT_ROOT .'/file/upload/123/'.$now.'.amr';
$mp3File = DT_ROOT .'/file/upload/123/'.$now.'.mp3';
// 调用PHP命令,将amr格式文件转换为mp3
$command = "ffmpeg -i " . $amrFile . " " . $mp3File . " 2>&1";
$a1=exec($command, $output1,$return1);
$a2=$a1.'|'.$output1.'|'.$return1;
//var_dump($al);
$videourl=$CFG['url'] .'/file/upload/123/'.$now.'.mp3';//类似http:....../时间戳.mp3
// $videourl=$mp3File;
$names=$_username;
$db->query("INSERT INTO {$DT_PRE}sound_record (userid,username,soundrecord,addtime,status) VALUES ('$_userid','$names','$videourl','$now','1')");
echo 1;
exit;
转载自:微信 JS-SDK 录音功能开发