So streamen Sie abgeschnittenes Audio mit der MediaSource-API
Mit dem MediaSource-API, Sie können Medienströme generieren und konfigurieren direkt im Browser Es erlaubt dir zu eine Vielzahl von Operationen mit Mediendaten durchführen wird von medienbezogenen HTML-Tags wie z oder . Zum Beispiel können Sie verschiedene Streams mischen, Überlappende Medien erstellen, faule Lademedien, und Medienkennzahlen bearbeiten Ändern Sie beispielsweise die Lautstärke oder die Frequenz.
In diesem Beitrag werden wir genau sehen, wie es geht Stream ein Audio-Sample (eine abgeschnittene MP3-Datei) mit der MediaSource-API rechts im Browser um Musik vor der Show zu deinem Publikum Wir werden darüber berichten, wie Unterstützung für die API erkennen, wie man Verbinden Sie das HTML-Medienelement zur API, wie Holen Sie sich die Medien über Ajax und schließlich wie streamen.
Wenn Sie im Voraus sehen wollen, was wir vorhaben, schauen Sie sich das an Quellcode auf Github, oder check das aus Demo-Seite.
Schritt 1. Erstellen Sie den HTML-Code
Um den HTML-Code zu erstellen, fügen Sie ein ein tag mit einem Kontrollen Attribut zu Ihrer Seite. Aus Gründen der Rückwärtskompatibilität Fügen Sie eine Standardfehlermeldung hinzu für Benutzer, deren Browser die Funktion nicht unterstützen. Wir verwenden JavaScript, um diese Nachricht zu aktivieren / deaktivieren.
Schritt 2. Browserunterstützung erkennen
Erstellen Sie in JavaScript eine versuche es… zu fangen Blockieren Sie diesen Willen einen Fehler werfen wenn die Die MediaSource-API wird nicht unterstützt durch den Browser des Benutzers oder mit anderen Worten if MediaSource (der Schlüssel) ist nicht vorhanden in dem Fenster Objekt.
try if (! 'MediaSource' in window) werfen neuen ReferenceError aus ('Es gibt keine MediaSource-Eigenschaft im Fensterobjekt.') catch (e) console.log (e); Schritt 3. Ermitteln Sie die MIME-Unterstützung
Überprüfen Sie nach der Supportüberprüfung auch die Unterstützung des MIME-Typs. Wenn der MIME-Typ des Mediums, das Sie streamen möchten, vom Browser nicht unterstützt wird, den Benutzer benachrichtigen und einen Fehler werfen.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Das Medium kann nicht abgespielt werden. Das Medium vom MIME-Typ' + mime + 'wird nicht unterstützt.'); throw ('Medien des Typs' + mime + 'werden nicht unterstützt.'); Beachten Sie, dass das obige Code-Snippet sein muss im Inneren platziert Versuchen Block, Vor dem Fang Block (als Referenz, folgen Sie der Zeilennummerierung oder checken Sie die endgültige JS-Datei auf Github aus).
Schritt 4. Verknüpfen Sie die
Erstelle eine neue MediaSource Objekt und Weisen Sie es als Quelle der Etikett mit der URL.createObjectURL () Methode.
var audio = document.querySelector ('audio'), mediaSource = neue MediaSource (); audio.src = URL.createObjectURL (mediaSource); Schritt 5. Fügen Sie ein SourceBuffer Gegenstand zu MediaSource
Wenn ein HTML-Medienelement greift auf eine Medienquelle zu und ist bereit zu erstellen SourceBuffer Objekte, die MediaSource-API feuert ein sourceopen Veranstaltung .
Das SourceBuffer Objekt hält ein Stück Medien das wird schließlich entschlüsselt, verarbeitet und abgespielt. Ein einzelnes MediaSource Objekt kann mehrere haben SourceBuffer Objekte.
In der Eventhandler der sourceopen Veranstaltung, füge hinzu ein SourceBuffer Gegenstand zu MediaSource mit dem addSourceBuffer () Methode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Schritt 6. Holen Sie das Medium
Jetzt hast du eine SourceBuffer Objekt, es ist Zeit zu Holen Sie sich die MP3-Datei. In unserem Beispiel machen wir das mit einer AJAX-Anfrage.
Benutzen Arraypuffer wie responseType, welche bezeichnet binäre Daten. Wenn die Antwort erfolgreich abgerufen wurde, hänge es an SourceBuffer mit dem appendBuffer () Methode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'Datei nicht gefunden'; default: throw 'Fehler beim Abrufen der file '; catch (e) console.error (e);; xhr.send ();); Schritt 7. Geben Sie das Ende des Streams an
Wenn das API die Daten an angehängt hat SourceBuffer ein Ereignis aufgerufen updatend wird gefeuert. Rufen Sie in einem Event-Handler die Ende der Übertragung() Methode von MediaSource zu zeigt an, dass der Stream beendet ist.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream ();) ); break; Fall 404: "Datei nicht gefunden" werfen; Standard: "Die Datei konnte nicht abgerufen werden"; catch (e) console.error (e);; xhr.send ();) ; Schritt 8. Schneiden Sie die Mediendatei ab
Das SourceBuffer Objekt hat zwei Eigenschaften namens appendWindowStart und appendWindowEnd vertritt die Start- und Endzeit der Mediendaten Sie möchten filtern. Der hervorgehobene Code unten filtert die ersten vier Sekunden von der MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
Und das ist alles unser Audio-Sample wird gestreamt direkt von der Webseite. Für die Quellcode, schau dir unsere an Github Repo und für das Endergebnis, überprüfen Sie die Demo-Seite.
Browser-Unterstützung
Zum Zeitpunkt des Schreibens dieses Beitrags MediaSource Die API wird in allen gängigen Browsern offiziell unterstützt. Aber der Test zeigt, dass die Die Implementierung ist in Firefox fehlerhaft, und Webkit-Browser haben immer noch Probleme mit der appendWindowStart Eigentum.
Wie die MediaSource-API ist noch in der experimentellen Phase, Der Zugriff auf höhere Bearbeitungsfunktionen kann jedoch eingeschränkt sein grundlegendes Streaming Feature ist etwas, das Sie können nutzen Sie sofort aus.
