Das Aufzeichnen und Hochladen von HTML5-Webseiten auf den Server unterstützt die WeChat-Funktion für PC, Android und iOS

Wenn Sie die Erstellung einer webbasierten Chat-Oberfläche vorbereiten, sollten Sie über Emoticons, Bilder und hochgeladene Dateien verfügen. Vergessen Sie Videos, Sie benötigen immer noch eine Stimme.

In diesem Artikel wird die Online-Aufzeichnung und das Hochladen auf den Server mithilfe von Recorder auf GitHub auf einer Webseite aufgezeichnet.

Dieser Beispielcode unterstützt die Verwendung auf PC, Android und IOS (nur Safari). Wenn Sie RecordApp verwenden, können Sie Unterstützung für IOS (WeChat-Browser, Applet) hinzufügen.

Es ist besser, einmal zu handeln, als den Code tausende Male zu lesen. Erstellen Sie eine neue HTML-Datei, kopieren Sie die folgenden drei Codeteile in die Datei und doppelklicken Sie auf den Browser, um sie zum Testen zu öffnen.

 <!-- Laden Sie zuerst die js-Aufzeichnungsbibliothek. Hinweis: Sie sollten js zur Verwendung lokal klonen --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Aufnahme starten><hr><input type=button onclick=playRec() value=Ende und abspielen><input type=button onclick=uploadRec() value=Ende und hochladen><script>var rec;function startRec(){ rec=Recorder();//Standardkonfiguration verwenden, MP3-Format//Öffnen Mikrofonautorisierung zum Abrufen verwandter Ressourcen rec.open(function(){ //Aufnahme starten rec.start(); },function(msg,isUserNotAllow){ //Der Benutzer hat die Berechtigung verweigert oder der Browser unterstützt keine Warnung((isUserNotAllow? Der Benutzer hat die Berechtigung verweigert, :)+unable to record:+msg);};</script>

 <script>function uploadRec(){ // Stoppen Sie die Aufzeichnung und rufen Sie das Blob-Binärobjekt der Aufzeichnungsdatei ab. Sie können tun, was Sie wollen. rec.stop(function(blob,duration){ /* Blob-Dateiobjekt, mit dem ausgelesen werden kann FileReader-Inhalt oder Hochladen mit FormData. In diesem Beispiel wird die Binärdatei direkt hochgeladen. Für den normalen Upload von application/x-www-form-urlencoded lesen Sie bitte das Beispiel in github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //Es unterscheidet sich nicht vom normalen Formularformular. Das Backend empfängt die Datei mit dem Parameter upfile und der Dateiname lautet recorder.mp3 //Verwenden Sie Ajax, um var direkt hochzuladen xhr=new XMLHttpRequest (); xhr.open(POST, http://baidu.com/, ändern Sie es in Ihre Upload-Adresse);//Diese gefälschte Adresse kann die Anforderungsdaten und das Format im Konsolennetzwerk sehen, das Anforderungsergebnis ist irrelevant xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ warning(xhr.status==200?Upload erfolgreich: Zum Testen öffnen Sie bitte zuerst die Browserkonsole und zeichnen Sie dann erneut auf. Auf der Registerkarte „Netzwerk“ können Sie den Upload sehen Daten anfordern und formatieren); xhr.send(form); },function(msg){ warning(recording failed:+msg);};</script>

 <script>function playRec(){ // Stoppen Sie die Aufnahme, holen Sie sich das Blob-Binärobjekt der Aufnahmedatei, machen Sie, was Sie wollen rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio. Controls= true; document.body.appendChild(audio); //Es ist sehr einfach, die Blob-Audio-URL zu erhalten audio.src=URL.createObjectURL(blob); },function(msg){ alarm(recording failed:+msg); });};</script>

-------------------------------------------------- ----------------------------------

GitHub-Adresse: https://github.com/xiangyuecn/Recorder

Online-Test: Klicken Sie hier, um zu testen

Recorder wird für die HTML5-Aufzeichnung verwendet. Es handelt sich um eine reine JS-Bibliothek, die die meisten Mobil- und PC-Browser unterstützt, die getUserMedia implementiert haben, einschließlich des Tencent Android X5-Kernels (QQ, WeChat).

Die Aufnahme erfolgt standardmäßig im MP3-Format und das WAV-Format ist optional (die Aufnahmedatei in diesem Format ist sehr groß); Unterstützung für jede Formaterweiterung (vorausgesetzt, es gibt einen entsprechenden Encoder). ).

Kompakt: Wenn keine besonderen Anforderungen an die Größe der Aufnahmedatei bestehen, können Sie einfach den Aufnahmekern + WAV-Encoder verwenden. Der Quellcode umfasst weniger als 300 Zeilen und die komprimierte Datei recorder.wav.min.js ist weniger als 4 KB groß . MP3 wird mit lamejs codiert und die komprimierte Datei recorder.mp3.min.js ist nach dem Einschalten von gzip 54 KB groß.

Da nur Safari getUserMedia unter IOS (11. Browser, Miniprogramm-Webansicht) unterstützt, bietet RecordApp auch eine bessere Unterstützung für Hybrid App.

Da RecordApp ein öffentliches WeChat-Konto (Abonnement) benötigt, um JsSDK-Aufzeichnungsunterstützung bereitzustellen, wird die Entwicklung schwieriger, es werden jedoch mehr Umgebungen unterstützt. Der Rekorder kann sofort verwendet werden, siehe Tabelle unten:

* Sie können den RecordApp Quellcode in Github überprüfen, der sich im Verzeichnis xiangyuecn/Recorder/app-support-sample befindet.

Das Obige ist die vom Herausgeber eingeführte HTML5-Webseite. Sie unterstützt die WeChat-Funktion für PC, Android und iOS. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!