Fonction d'enregistrement développée par WeChat

Enregistrement de développement de la fonction d'enregistrement WeChat jssdk

balises (séparées par des espaces) : Front-end

---

Description de l'exigence

La page ouverte dans le navigateur WeChat. , Créez un bouton qui démarre l'enregistrement lorsque l'utilisateur appuie dessus, arrête l'enregistrement lorsqu'il le relâche et télécharge l'enregistrement pour un stockage à long terme.

---

1. Processus de développement

Si vous développez une page d'affichage ordinaire, ce n'est pas différent du développement d'une page ordinaire, mais vous devez utiliser un appareil (téléphone portable ) ici Pour utiliser la fonction d'enregistrement, vous devez appeler l'interface d'enregistrement de l'application WeChat et utiliser le jssdk WeChat.

Utiliser WeChat jssdk : documentation WeChat JS-SDK

• Connectez-vous d'abord à la plateforme publique WeChat et entrez les « Paramètres de fonction » de « Paramètres du compte officiel" Remplissez le "Nom de domaine de sécurité de l'interface JS". [Compte public WeChat requis]

• Introduire les fichiers JS

• Injecter la configuration de vérification des autorisations via l'interface de configuration

• Gérer la vérification réussie via l'interface prête

• Gérer l'échec de la vérification via l'interface d'erreur

//假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

Fonctions de base requises cette fois : Enregistrez et sauvegardez

//假设全局变量已经在外部定义
//按下开始录音
$('#talk_btn').on('touchstart', function(event){
    event.preventDefault();
    START = new Date().getTime();

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = 'true';
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    },300);
});
//松手结束录音
$('#talk_btn').on('touchend', function(event){
    event.preventDefault();
    END = new Date().getTime();
    
    if((END - START) < 300){
        END = 0;
        START = 0;
        //小于300ms，不录音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {
            voice.localId = res.localId;
            uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
});

//上传录音
function uploadVoice(){
    //调用微信的上传录音接口把本地录音先上传到微信的服务器
    //不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
    wx.uploadVoice({
        localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
            //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
            $.ajax({
                url: &#39;后端处理上传录音的接口&#39;,
                type: &#39;post&#39;,
                data: JSON.stringify(res),
                dataType: "json",
                success: function (data) {
                    alert(&#39;文件已经保存到七牛的服务器&#39;);//这回，我使用七牛存储
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
    success: function (res) {
        stopWave();
    }
});

---

2. Petits problèmes

Pour éviter un enregistrement invalide causé par une mauvaise utilisation de l'utilisateur (tels que des clics répétés, des touches accidentelles).

Aucun enregistrement si moins de 300 ms

Empêcher la « boîte de dialogue de copie » par défaut du navigateur WeChat d'apparaître lorsque l'utilisateur appuie longuement.

Utilisez CSS pour définir le bouton de sélection de l'utilisateur : aucun ;

Événement de l'interface d'enregistrement de lecture WeChatFonction de rappelInvalide

Les événements d'inscription WeChat doivent être placés dans wx.ready.

Empêcher les événements par défaut

événement tactile n'oubliez pas d'ajouter event.preventDefault(); >statique

La durée de la ressource est de 3 jours. Comment la sauvegarder longtemps

Soit la sauvegarder sur votre propre serveur, soit utiliser d'autres

ressources, telles que comme Qiniu, qui peut aussi nous aider à convertir librement le format amr en mp3 En attendant le format !

Le format de ressource par défaut du serveur WeChat est amr. Ce format peut être lu à l'aide de la balise audio sur les machines Android, mais ne peut pas être lu sur les machines iOS à l'aide de la balise audio.
Problèmes d'interaction causés par l'autorisation de la fonction d'enregistrement WeChat

En utilisant l'interface WeChat jssdk pour enregistrer, vous n'avez besoin de l'autoriser qu'une seule fois dans le même domaine. Autrement dit, lorsque l'enregistrement est utilisé pour la première fois, WeChat affichera une boîte de dialogue demandant si l'enregistrement est autorisé. Une fois que l'utilisateur a cliqué sur Autoriser, l'autorisation ne lui sera pas demandée lors de la nouvelle utilisation de l'enregistrement.

Après avoir appuyé et maintenu le bouton d'enregistrement pour la première fois, puisque l'utilisateur n'a pas autorisé l'enregistrement, WeChat demandera à l'utilisateur d'autoriser l'utilisation de la fonction d'enregistrement WeChat sur cette page à ce moment. , l'utilisateur relâchera le bouton d'enregistrement et cliquera dessus à la place. L'enregistrement démarrera réellement une fois que l'utilisateur aura donné son autorisation. À ce moment-là, l'utilisateur a déjà relâché le bouton d'enregistrement, il n'y aura donc pas d'événement touchend sur le bouton d'enregistrement. , et l'enregistrement continuera. Stratégie de solution : utilisez localStorage pour enregistrer si l'utilisateur l'a autorisé, et utilisez-le pour déterminer s'il est nécessaire d'enregistrer automatiquement un enregistrement lorsque vous entrez pour la première fois dans la page pour déclencher l'autorisation de l'utilisateur

3 .Problème

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = 'true';
            wx.stopRecord();
        },
        cancel: function () {
            alert('用户拒绝授权录音');
        }
    });
}

Bug de volume : Sur un appareil iOS, après avoir utilisé la fonction d'enregistrement WeChat puis joué la balise audio, le volume est extrêmement faible.

---

Cependant, le volume de l'enregistrement joué à l'aide de l'interface WeChat (wx.playVoice) est normal, et après cela, le volume de la balise audio augmentera (mais le volume sera toujours très faible).

Ce problème est communiqué au personnel technique WeChat concerné.
La solution temporaire est la suivante : pour l'audio qui vient d'être enregistré, utilisez wx.playVoice pour le lire, sinon utilisez l'audio pour lire la ressource du serveur. La raison en est qu'il n'est pas sûr que l'audio existe localement. L'audio qui vient d'être enregistré existe définitivement.

[Recommandations associées]

1.

Téléchargement du code source de la plateforme de compte public WeChat

2 Téléchargement gratuit du code source du système de commande Alizi<.>

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!