WeChat jssdk 오디오 녹음 및 재생 예제의 HTML5 구현

HTML5 WeChat 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(&#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");

그런 다음 Baofengyingyin으로 재생하세요
관련 권장 사항:

프론트 엔드 WeChat 공유 jssdk 구성: 잘못된 서명 서명 오류 해결

thinkPHP WeChat 공유 인터페이스 JSSDK 예시 설명

WeChat jssdk 공유 기능 예시 튜토리얼

위 내용은 WeChat jssdk 오디오 녹음 및 재생 예제의 HTML5 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!