de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So streamen Sie abgeschnittenes Audio mithilfe der MediaSource-API

Mit der MediaSource-API können Sie Medienströme direkt im Browser generieren und konfigurieren . Es ermöglicht Ihnen , eine Vielzahl von Operationen auf Mediendaten durchzuführen, die von medienbezogenen HTML-Tags wie z

In diesem Beitrag erfahren Sie, wie Sie ein Audio-Sample (eine abgeschnittene MP3-Datei) mit der MediaSource-API direkt im Browser streamen, um Ihrer Zielgruppe Musik vorzuspielen. Wir werden behandeln, wie man Unterstützung für die API erkennt, wie man das HTML-Medienelement mit der API verbindet, wie man die Medien über Ajax holt und schließlich wie man es streamt .

Wenn Sie im Voraus sehen möchten, was wir vorhaben, werfen Sie einen Blick auf den Quellcode von Github oder sehen Sie sich die Demo-Seite an .

Schritt 1. Erstellen Sie den HTML-Code

Um den HTML-Code zu erstellen, fügen Sie einen hinzu

Schritt 2. Erkennen Sie die Browserunterstützung

Erstellen Sie in JavaScript einen try…catch Block, der einen Fehler auslöst, wenn die MediaSource-API nicht vom Browser des Benutzers unterstützt wird, oder mit anderen Worten, wenn MediaSource (der Schlüssel) nicht im window ist.

 try {if (! 'MediaSource' im Fenster) wirft neues ReferenceError ('Es gibt keine MediaSource-Eigenschaft im Fensterobjekt.')} catch (e) {console.log (e); } 

Schritt 3. Erkennen Sie die MIME-Unterstützung

Überprüfen Sie nach der Unterstützungsprüfung auch, ob der MIME-Typ unterstützt wird . Wenn der MIME-Typ des Mediums, das Sie streamen möchten, nicht vom Browser unterstützt wird, warnen Sie den Benutzer und geben Sie einen Fehler aus .

 var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) {alert ('Die Medien können nicht wiedergegeben werden. Datenträger mit MIME-Typ' + mime + 'werden nicht unterstützt.'); throw ('Medien vom Typ' + Pantomime + 'wird nicht unterstützt.'); } 

Beachten Sie, dass das obige Code-Snippet innerhalb des try Blocks vor dem catch Block platziert werden muss (als Referenz folgen Sie der Zeilennummerierung oder überprüfen Sie die endgültige JS-Datei auf Github).

Schritt 4. Verknüpfen Sie die

Erstellen Sie ein neues MediaSource Objekt und weisen Sie es als Quelle für das Objekt zu

 var audio = document.querySelector ('Audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

Schritt 5. Fügen Sie ein SourceBuffer Objekt zu MediaSource

Wenn ein HTML- SourceBuffer auf eine Medienquelle zugreift und bereit ist , SourceBuffer Objekte zu erstellen, SourceBuffer die MediaSource-API ein sourceopen Ereignis aus .

Das SourceBuffer Objekt enthält einen Teil des Mediums, der schließlich decodiert, verarbeitet und abgespielt wird. Ein einzelnes MediaSource Objekt kann mehrere SourceBuffer Objekte enthalten .

sourceopen im Ereignishandler des sourceopen Ereignisses ein SourceBuffer Objekt mit der addSourceBuffer() -Methode zu MediaSource addSourceBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime);}); 

Schritt 6. Holen Sie das Medium

Jetzt, da Sie ein SourceBuffer Objekt haben, ist es an der Zeit, die MP3-Datei zu holen . In unserem Beispiel verwenden wir eine AJAX-Anfrage .

Verwenden Sie den arraybuffer als responseType, der binäre Daten bezeichnet . Wenn die Antwort erfolgreich abgerufen wurde , SourceBuffer mit der appendBuffer() -Methode an SourceBuffer an.

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = neues XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {Fall 200: sourceBuffer.appendBuffer (this.response); break; Fall 404: throw 'Datei nicht gefunden'; Standard: throw 'Fehler beim Abrufen des Datei ';}} catch (e) {console.error (e);}}; xhr.send ();}); 

Schritt 7. Geben Sie das Ende des Streams an

Wenn die API die Daten an SourceBuffer ein Ereignis namens updatend ausgelöst . Rufen endOfStream() einem Ereignishandler die endOfStream() Methode von MediaSource auf, um anzugeben, dass der Stream beendet wurde .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = neues XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {Fall 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', Funktion (_) {mediaSource.endOfStream ();} ); break; Fall 404: "Datei nicht gefunden" wird geworfen; default: throw "konnte die Datei nicht abrufen";}} catch (e) {console.error (e);}}; xhr.send ();}) ; 

Schritt 8. Kürzen Sie die Mediendatei

Das SourceBuffer Objekt verfügt über zwei Eigenschaften mit dem Namen appendWindowStart und appendWindowEnd die die Start- und Endzeit der Mediendaten appendWindowEnd, die Sie filtern möchten. Der hervorgehobene Code unten filtert die ersten vier Sekunden des MP3.

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...}); 

Demo

Und das ist alles, unser Audio-Sample wird direkt von der Webseite gestreamt . Den Quellcode finden Sie in unserem Github Repo und für das Endergebnis schauen Sie sich die Demo Seite an .

Browserunterstützung

Zum MediaSource der Erstellung dieses Posts wird die MediaSource API offiziell in allen gängigen Browsern unterstützt. Aber die Tests zeigen, dass die Implementierung in Firefox appendWindowStart ist, und Webkit-Browser haben immer noch Probleme mit der Eigenschaft appendWindowStart .

Da sich die MediaSource-API noch in der Testphase befindet, kann der Zugriff auf höhere Bearbeitungsfunktionen eingeschränkt sein, aber Sie können die grundlegende Streaming- Funktion sofort nutzen .

12 WordPress-Plugins zur Verwaltung von Front-End-Inhalten

12 WordPress-Plugins zur Verwaltung von Front-End-Inhalten

WordPress ist eine großartige Plattform für die Verwaltung eines Blogs, einer Website, eines Portfolios usw., ist jedoch begrenzt, wenn es um die Art und Weise geht, wie Sie Ihre Inhalte verwalten - alles geschieht über das Backend des Blogs . Dies bedeutet, dass Sie selbst dann, wenn Sie etwas schnell auf einem Post oder einer Seite bearbeiten müssen, zum Backend gehen müssen.Zuge

(Tech- und Design-Tipps)

Mit Snapchat Stories können Sie jetzt über 1 Million kuratierte Storys durchsuchen

Mit Snapchat Stories können Sie jetzt über 1 Million kuratierte Storys durchsuchen

In letzter Zeit waren viele soziale Netzwerkdienste damit beschäftigt, sich gegenseitig Merkmale zu "entleihen" . Snapchat wäre wahrscheinlich mit einem solchen Vorfall vertraut, da sein Stories-Feature seither seine Konkurrenten dazu inspiriert hat, funktional identische Merkmale in ihre Dienste einzuführen .Da

(Tech- und Design-Tipps)