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 .

Was ist neu in Android Nougat 7.1.1

Was ist neu in Android Nougat 7.1.1

Nutzer von Pixel und Nexus nehmen zur Kenntnis, dass Google das Android Nougat 7.1.1-Update veröffentlicht hat. Dazu kommen neue Emojis sowie zwei neue Qualitätsverbesserungen.Im Rahmen von Googles Position zur Gleichstellung der Geschlechter enthält Nougat 7.1.1 eine Reihe neuer Emojis, die "die zentralen Rollen widerspiegeln, die Frauen in der Welt spielen". D

(Tech- und Design-Tipps)

Samsung deckt die Ursache von Explosionen in Anmerkung 7 auf

Samsung deckt die Ursache von Explosionen in Anmerkung 7 auf

Nach monatelangen Spekulationen über den Grund für die Selbstentzündungstendenz der Note 7 hat Samsung seine Untersuchung abgeschlossen . Basierend auf den Ergebnissen, die Samsung gesammelt hat, bestätigt das koreanische Unternehmen offiziell , dass Batterieprobleme der Grund dafür sind, dass die ursprüngliche Charge und die Ersatzbatterie fehlten.Bei d

(Tech- und Design-Tipps)