Example of implementing WeChat jssdk recording and playing voice using HTML5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Example of implementing WeChat jssdk recording and playing voice using HTML5

小云云

Mar 17, 2018 am 09:15 AM

html5 javascript

HTML5 WeChat jssdk method of recording and playing voice 2 issues that need attention 1 It must be judged that the recording within 1 second is not counted. ps: it is too short to record. 2 If the recording exceeds 1 minute, you will find that the recording suddenly disappears, so you need to write wx.onVoiceRecordEnd. This will automatically start after 1 minute and then write the upload data.

前端代码如下

Copy after login

 $(&#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");
            }
        })
    }

Copy after login

The core code of the back-end code is as follows. Just write it directly into 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");

Copy after login

Then play it with Baofeng Video
Related recommendations:

Front-end WeChat share jssdk config :invalid signature Solution to signature error

thinkPHP WeChat sharing interface JSSDK example explanation

WeChat jssdk sharing function example tutorial

The above is the detailed content of Example of implementing WeChat jssdk recording and playing voice using HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn