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

0. Description de l'exigence

Créez un bouton sur la page ouverte dans le navigateur WeChat. L'utilisateur commence l'enregistrement après avoir appuyé et maintenu le bouton, et s'arrête. enregistrement après l'avoir relâché. Et téléchargez l'enregistrement et sauvegardez-le pendant une longue période.

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 ici, vous devez utiliser la fonction d'enregistrement de l'appareil (téléphone portable ). Pour appeler l'interface d'enregistrement de l'application WeChat, vous devez utiliser WeChat jssdk.

Utiliser WeChat jssdk : documentation WeChat JS-SDK

Connectez-vous d'abord à la plateforme publique WeChat et entrez dans les « Paramètres de fonction » des « Paramètres du compte officiel " et renseignez 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可以在这里更新签名。

});

Copier après la connexion

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: '后端处理上传录音的接口',
                type: 'post',
                data: JSON.stringify(res),
                dataType: "json",
                success: function (data) {
                    alert('文件已经保存到七牛的服务器');//这回，我使用七牛存储
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

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

Copier après la connexion

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 user-select:none;

La fonction de rappel d'événement de l'interface d'enregistrement de lecture WeChat n'est pas valide

WeChat l'événement d'inscription doit être mis dans wx.ready.

Prévenir les événements par défaut

Événement tactile n'oubliez pas d'ajouter event.preventDefault(); Protection contre les incendies et les explosions

WeChat stocke des ressources statiques pour 3 jours, comment le sauvegarder pendant longtemps

Soit enregistrez-le sur votre propre serveur, soit utilisez d'autres ressources, comme Qiniu, qui peuvent également nous aider à convertir librement le format amr en mp3 et autres formats!
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, c'est-à-dire lorsque vous utilisez l'enregistrement pour la première fois. WeChat lui-même 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 enfoncé 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. bouton d'enregistrement et cliquez sur Autoriser. Une fois que l'utilisateur l'a autorisé, l'enregistrement démarrera réellement. À ce moment-là, l'utilisateur a déjà relâché le bouton d'enregistrement, il n'y aura donc aucun événement de fin de contact 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 lors de l'entrée dans la page pour déclencher l'autorisation de l'utilisateur

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

Copier après la connexion

3 .Problème

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).

Pour plus d'articles liés aux enregistrements de développement de la fonction d'enregistrement WeChat jssdk, veuillez faire attention au site Web PHP chinois !