HTML5实现微信jssdk录音播放语音的实例

来源：枰培教育

HTML5微信jssdk录音播放语音的方法需要注意的2个问题 1 就是一定要判断1秒内录音都不算 ps:太短不能录音 2 录音超过1分钟会发现正在录音突然消失所以要写wx.onVoiceRecordEnd 这个是是1分钟会自动出发然后写上传数据。

前端代码如下

 $('.luyin').on('touchstart',function () {
 wx.startRecord({
 success: function(){
 START = new Date().getTime();
 wx.onVoiceRecordEnd({
 // 录音时间超过一分钟没有停止的时候会执行 complete 回调
 complete: function (res) {
 alert('最多只能录制一分钟');
 var localId = res.localId;
 uploadluyin(localId,60000);
 }
 });
 },
 cancel: function () {
 alert('用户拒绝授权录音');
 return false;
 }
 });

 })
 $('.luyin').on('touchend',function () {
 END = new Date().getTime();
 //录音时间
 luyintime=END - START;
 if(luyintime < 2000){
 END = 0;
 START = 0;
 wx.stopRecord({});
 alert('录音时间不能少于2秒');
 return false;
 //小于300ms，不录音
 }else {


 wx.stopRecord({
 success: function (res) {
 localId = res.localId;

 uploadluyin(localId,luyintime);

 }
 });
 }
 })
 
 function uploadluyin(localId,luyintime) {
 wx.uploadVoice({
 localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
 isShowProgressTips: 1, // 默认为1，显示进度提示
 success: function (res) {
 var serverId = res.serverId; // 返回音频的服务器端ID
 console.log(serverId);

 $.post("/home/xishanluyin/scyuyin", {
 "serverId": serverId,
 "luyintime": luyintime
 },
 function (data) {
 if (data.success == 1) {
 alert('录音成功');
 } else {
 alert(data.msg);
 }
 }, "json");
 }
 })
 }

后端代码核心代码如下直接写入mp3就行

$ft = copy("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$imgServerId}",
	APP_PATH . "/../Public/{$project}/upload/{$imgServerId}.mp3");

然后用暴风影音播放
相关推荐：

前端微信分享jssdk config:invalid signature 签名错误的解决方法

thinkPHP微信分享接口JSSDK实例讲解

微信jssdk分享功能实例教程