Entwicklungsaufzeichnung der WeChat-JSSDK-Aufzeichnungsfunktion

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可以在这里更新签名。

});

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) <hr><h3 id="Kleine-Probleme"> 2. Kleine Probleme </h3><p> Um ungültige Aufzeichnungen zu verhindern, die durch Fehlbedienungen des Benutzers verursacht werden (z. B. wiederholte Klicks, versehentliche Berührungen). </p><blockquote><p>Keine Aufzeichnung, wenn weniger als 300 ms </p></blockquote><p>Verhindern Sie, dass das Standarddialogfeld „Kopieren“ des WeChat-Browsers angezeigt wird, wenn der Benutzer lange drückt. </p><blockquote><p>Verwenden Sie CSS, um die Schaltfläche user-select:none festzulegen;</p></blockquote><p>Die Ereignisrückruffunktion der WeChat-Wiedergabeaufzeichnungsschnittstelle ist ungültig </p><blockquote><p>WeChat Das Registrierungsereignis muss in wx.ready sein. </p></blockquote><p>Standardereignisse verhindern</p><blockquote><p>Berühren Sie Ereignis. Denken Sie daran, event.preventDefault(); Brand- und Explosionsschutz hinzuzufügen</p></blockquote><p>WeChat speichert statische Ressourcen für 3 Tage, wie man es für lange Zeit speichert </p><blockquote><p>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! <br>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. </p></blockquote><p>Interaktionsprobleme, die durch die Autorisierung der WeChat-Aufzeichnungsfunktion verursacht werden</p><blockquote><p>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. <br>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. <br>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 </p></blockquote><pre class="brush:php;toolbar:false">if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = 'true';
            wx.stopRecord();
        },
        cancel: function () {
            alert('用户拒绝授权录音');
        }
    });
}

---

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!