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-CodeUm 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 .
WordPress 4.4: 10 coolste neue Funktionen, die Sie kennen sollten
WordPress 4.4 wurde gerade veröffentlicht und wir haben mit diesem neuen Angebot herumgespielt, um zu sehen, welche neuen Features wir finden konnten. Diese neue Version wird mit einigen Verbesserungen ausgeliefert, die WordPress-Entwickler verrückt werden lassen. Es könnte sogar die Zukunft von WordPress in der JavaScript-Ära bestimmen.In
Durchsuchen Sie Ihre Chrome-Chronik mit einer tieferen Geschichte
Tabbed Browsing ist eine geniale Idee. Alles, was Sie tun müssen, ist alle Ihre Links in einem neuen Tab zu öffnen und Sie können die Registerkarten im Hintergrund laden lassen, während Sie Ihren Artikel lesen oder Ihr Video auf einem einzelnen geladenen Tab sehen. Wenn Sie jedoch eine Website erneut aufrufen, die Sie bereits einmal gelesen haben, ist das Suchen und Abrufen des Links aus Ihrem Chrome-Browserverlauf ein Problem. In