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 .