Entwicklungsaufzeichnung der WeChat jssdk-Funktion

0. Anforderungsbeschreibung

Erstellen Sie eine Schaltfläche auf der im WeChat-Browser geöffneten Seite. Der Benutzer beginnt mit der Aufzeichnung, nachdem er die Schaltfläche gedrückt gehalten hat Aufnahme nach dem Loslassen. Laden Sie die Aufnahme hoch und speichern Sie sie für längere Zeit.

1. Entwicklungsprozess

Wenn Sie eine normale Anzeigeseite entwickeln, unterscheidet es sich nicht von der Entwicklung einer gewöhnlichen Seite, aber hier müssen Sie die Aufnahmefunktion des Geräts (Mobiltelefons) verwenden ). Um die Aufnahmeschnittstelle der WeChat-App aufzurufen, müssen Sie WeChat jssdk verwenden.

Verwenden Sie WeChat jssdk: WeChat JS-SDK-Dokumentation

Melden Sie sich zunächst bei der öffentlichen WeChat-Plattform an und geben Sie die „Funktionseinstellungen“ der „Offiziellen Kontoeinstellungen“ ein „ und füllen Sie „ JS-Schnittstellen-Sicherheitsdomänenname“ aus. [Öffentliches WeChat-Konto erforderlich]

JS-Dateien einführen

Konfiguration der Berechtigungsüberprüfung über die Konfigurationsschnittstelle einfügen

Erfolgreiche Verifizierung über die fertige Schnittstelle abwickeln

Fehlgeschlagene Verifizierung über die Fehlerschnittstelle abwickeln

//假设已引入微信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可以在这里更新签名。

});

Nach dem Login kopieren

Diesmal erforderliche Kernfunktionen : Aufzeichnen und speichern

//假设全局变量已经在外部定义
//按下开始录音
$('#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();
    }
});

Nach dem Login kopieren

2. Kleine Probleme

Um ungültige Aufzeichnungen zu verhindern, die durch Fehlbedienungen des Benutzers verursacht werden (z. B. wiederholte Klicks, versehentliche Berührungen).

Keine Aufzeichnung, wenn weniger als 300 ms

Verhindern Sie, dass das Standarddialogfeld „Kopieren“ des WeChat-Browsers angezeigt wird, wenn der Benutzer lange drückt.

Verwenden Sie CSS, um die Schaltfläche user-select:none festzulegen;

Die Ereignisrückruffunktion der WeChat-Wiedergabeaufzeichnungsschnittstelle ist ungültig

WeChat Das Registrierungsereignis muss in wx.ready sein.

Standardereignisse verhindern

Berühren Sie Ereignis. Denken Sie daran, event.preventDefault(); Brand- und Explosionsschutz hinzuzufügen

WeChat speichert statische Ressourcen für 3 Tage, wie man es für lange Zeit speichert

Speichern Sie es entweder auf Ihrem eigenen Server oder verwenden Sie andere Ressourcen wie Qiniu, die uns auch dabei helfen können, das AMR-Format frei in MP3 und andere zu konvertieren Formate!
Das Standardressourcenformat des WeChat-Servers ist amr. Dieses Format kann mit dem Audio-Tag auf Android-Rechnern abgespielt werden, aber nicht auf iOS-Rechnern mit dem Audio-Tag.

Interaktionsprobleme, die durch die Autorisierung der WeChat-Aufzeichnungsfunktion verursacht werden

Wenn Sie die WeChat-jssdk-Schnittstelle zum Aufzeichnen verwenden, müssen Sie sie nur einmal in derselben Domäne autorisieren, d. h. wann Wenn Sie die Aufzeichnung zum ersten Mal verwenden, wird ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob die Aufzeichnung zulässig ist. Nachdem Sie auf „Zulassen“ geklickt haben, wird der Benutzer bei der erneuten Verwendung nicht um Erlaubnis gebeten.
Nachdem der Benutzer zum ersten Mal die Aufzeichnung gedrückt hat, fordert WeChat den Benutzer auf, die Verwendung der WeChat-Aufzeichnungsfunktion auf dieser Seite zu autorisieren. Zu diesem Zeitpunkt lässt der Benutzer die Aufzeichnungstaste los und klicken Sie auf Zulassen. Die Aufnahme wird tatsächlich gestartet. Zu diesem Zeitpunkt hat der Benutzer die Aufnahmetaste bereits losgelassen, sodass kein Touchend-Ereignis auf der Aufnahmetaste vorhanden ist und die Aufnahme fortgesetzt wird.
Lösungsstrategie: Verwenden Sie localStorage, um aufzuzeichnen, ob der Benutzer dies autorisiert hat, und ermitteln Sie damit, ob beim ersten Betreten der Seite automatisch eine Aufzeichnung aufgezeichnet werden muss, um die Benutzerautorisierung auszulösen

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

Nach dem Login kopieren

3.Problem

Lautstärkefehler: Auf einem iOS-Gerät ist die Lautstärke nach Verwendung der WeChat-Aufnahmefunktion und anschließender Wiedergabe des Audio-Tags extrem niedrig.
Die Lautstärke der über die WeChat-Schnittstelle (wx.playVoice) abgespielten Aufnahme ist jedoch normal, und danach erhöht sich die Lautstärke des Audio-Tags (aber die Lautstärke bleibt immer noch sehr niedrig).

Weitere Artikel zu Entwicklungsaufzeichnungen der WeChat jssdk-Aufzeichnungsfunktion finden Sie auf der chinesischen PHP-Website!