Maison >interface Web >Tutoriel H5 >Exemple d'implémentation de l'enregistrement et de la lecture de la voix WeChat jssdk à l'aide de HTML5

Exemple d'implémentation de l'enregistrement et de la lecture de la voix WeChat jssdk à l'aide de HTML5

小云云
小云云original
2018-03-17 09:15:258514parcourir

Comment enregistrer et lire de la voix avec HTML5 WeChat jssdk 2 problèmes qui nécessitent une attention particulière 1 Il faut juger que l'enregistrement en 1 seconde n'est pas compté ps : il est trop court pour enregistrer. 2 Si l'enregistrement dépasse 1 minute, vous constaterez que l'enregistrement disparaît soudainement, vous devez donc écrire wx.onVoiceRecordEnd. Cela démarrera automatiquement après 1 minute, puis écrire les données de téléchargement.

前端代码如下
 $('.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");
            }
        })
    }

Écrivez simplement le code principal du code back-end directement dans le mp3 comme suit

$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");

Ensuite, lisez-le avec Baofeng Video
Recommandations associées :

Solution pour le partage frontal de WeChat, configuration jssdk : erreur de signature non valide

explication de l'exemple JSSDK de l'interface de partage thinkPHP WeChat

Fonction de partage WeChat jssdk Exemple de tutoriel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn