WeChat jssdk-Aufzeichnungsfunktionsentwicklungsdatensatz

Tags (durch Leerzeichen getrennt): Front-End

0 Anforderungsbeschreibung

Die Seite wurde im WeChat-Browser geöffnet Erstellen Sie eine Schaltfläche, die die Aufnahme startet, wenn der Benutzer sie drückt, die Aufnahme stoppt, wenn er sie loslässt, und die Aufnahme zur Langzeitspeicherung hochlädt.

1. Entwicklungsprozess

Wenn Sie eine normale Anzeigeseite entwickeln, unterscheidet es sich nicht von der Entwicklung einer gewöhnlichen Seite, Sie müssen jedoch ein Gerät (Mobiltelefon) verwenden ) hier Um die Aufnahmefunktion zu nutzen, müssen Sie die Aufnahmeschnittstelle der WeChat-App aufrufen und das 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“ von „ ein. „Offizielle Kontoeinstellungen“ Geben Sie den „Domänennamen für die JS-Schnittstellensicherheit“ ein. [Ö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: &#39;&#39;, // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: &#39;&#39;, // 必填，生成签名的随机串
    signature: &#39;&#39;,// 必填，签名，见附录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

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

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = &#39;true&#39;;
            },
            cancel: function () {
                alert(&#39;用户拒绝授权录音&#39;);
            }
        });
    },300);
});
//松手结束录音
$(&#39;#talk_btn&#39;).on(&#39;touchend&#39;, 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();
    }
});

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;

WeChat spielt das Aufzeichnungsschnittstellenereignis abRückruffunktionUngültig

WeChat-Registrierungsereignisse müssen in wx.ready platziert werden.

Standardereignisse verhindern

Touch-Ereignis, denken Sie daran, event.preventDefault(); feuer- und explosionsgeschützt hinzuzufügen

WeChat-SpeicherstatischDie Ressourcenzeit beträgt 3 Tage

Entweder auf Ihrem eigenen Server speichern oder andere Ressourcen verwenden, z wie Qiniu, das uns auch dabei helfen kann, das AMR-Format frei in MP3 zu konvertieren. Warten auf das Format!
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 autorisieren Das heißt, wenn die Aufzeichnung zum ersten Mal verwendet wird, zeigt WeChat ein Dialogfeld an, in dem gefragt wird, ob die Aufzeichnung zulässig ist. Nachdem der Benutzer auf Zulassen geklickt hat, wird er bei der erneuten Verwendung nicht um Erlaubnis gebeten.
Nach dem ersten Drücken und Halten der Aufnahmetaste fordert WeChat den Benutzer auf, die Verwendung der WeChat-Aufzeichnungsfunktion auf dieser Seite zu autorisieren, da der Benutzer die Aufnahme nicht zugelassen hat , lässt der Benutzer die Aufnahmetaste los und klickt stattdessen auf „Zulassen“. Die Aufnahme beginnt tatsächlich, nachdem der Benutzer die Aufnahmetaste bereits losgelassen hat, sodass es kein Touchend-Ereignis auf der Aufnahmetaste gibt , und die Aufnahme wird fortgesetzt.
Lösungsstrategie: Verwenden Sie localStorage, um zu erfassen, ob der Benutzer dies autorisiert hat, und ermitteln Sie damit, ob beim Betreten der Seite automatisch eine Aufzeichnung aufgezeichnet werden muss, um die Benutzerautorisierung auszulösen

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

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

Dieses Problem wird dem zuständigen WeChat-Technikpersonal mitgeteilt.
Die vorübergehende Lösung lautet: Verwenden Sie für das gerade aufgenommene Audio wx.playVoice, um es abzuspielen, andernfalls verwenden Sie Audio, um die Serverressource abzuspielen. Der Grund dafür ist, dass nicht sicher ist, ob das Audio lokal vorhanden ist. Das gerade aufgenommene Audio ist definitiv vorhanden.

[Verwandte Empfehlungen]

1. Quellcode der WeChat-Plattform herunterladen

2. Quellcode des Alizi-Bestellsystems kostenlos herunterladen

Das obige ist der detaillierte Inhalt vonVon WeChat entwickelte Aufnahmefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!