PHP前端开发

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

百变鹏仔 2个月前 (10-18) #H5教程
文章标签 实例

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

前端代码如下
 $(&#39;.luyin&#39;).on(&#39;touchstart&#39;,function () {        wx.startRecord({            success: function(){                START = new Date().getTime();                wx.onVoiceRecordEnd({                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调                    complete: function (res) {                        alert(&#39;最多只能录制一分钟&#39;);                        var localId = res.localId;                        uploadluyin(localId,60000);                    }                });            },            cancel: function () {                alert(&#39;用户拒绝授权录音&#39;);                return false;            }        });    })    $(&#39;.luyin&#39;).on(&#39;touchend&#39;,function () {        END = new Date().getTime();        //录音时间        luyintime=END - START;        if(luyintime < 2000){            END = 0;            START = 0;            wx.stopRecord({});            alert(&#39;录音时间不能少于2秒&#39;);            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(&#39;录音成功&#39;);                            } 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");

然后用暴风影音播放