HTML5实现微信jssdk录音播放语音的实例-木庄网络博客

本文摘自PHP中文网，作者小云云，侵删。

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就行

1 2	`$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分享功能实例教程

以上就是HTML5实现微信jssdk录音播放语音的实例的详细内容，更多文章请关注木庄网络博客！