微信公众号录音功能及录音文件下载到自己服务器 一

网上查了很多资料,自己在总结一下,感谢各位大佬提供的资料。

页面

<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 录音功能开发

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值