Hoe getrunceerde audio te streamen met MediaSource API
Met de MediaSource API, jij kan genereren en configureren van mediastreams recht in de browser. Hiermee kunt u verschillende bewerkingen uitvoeren op mediadata gehouden door media-gerelateerde HTML-tags zoals of . U kunt bijvoorbeeld mix verschillende streams, maak overlappende media, luie media laden, en bewerk media-metrieken zoals het volume of de frequentie wijzigen.
In dit bericht zullen we specifiek zien hoe dat moet een audiomonster streamen (een ingekort MP3-bestand) met de MediaSource API recht in de browser om pre-show muziek voor uw publiek. We zullen bespreken hoe ondersteuning voor de API detecteren, hoe verbinding maken met het HTML-media-element naar de API, hoe haal de media op via Ajax, en tot slot hoe stream het.
Als je van tevoren wilt zien wat we van plan zijn, bekijk dan de broncode op Github, of bekijk de demopagina.
Stap 1. Maak de HTML
Om de HTML te maken, voegt u een toe tag met a controls attribuut naar uw pagina. Voor achterwaartse compatibiliteit, ook voeg een standaard foutmelding toe voor gebruikers wiens browsers de functie niet ondersteunen. We zullen JavaScript gebruiken om dit bericht in / uit te schakelen.
Stap 2. Detecteer browserondersteuning
Maak in JavaScript een proberen te vangen blokkeer die wil gooi een fout als het MediaSource API wordt niet ondersteund door de browser van de gebruiker of, met andere woorden, als MediaSource (de sleutel) bestaat niet in de venster voorwerp.
probeer if (! 'MediaSource' in venster) nieuwe ReferenceError ('Er is geen MediaSource-eigenschap in het vensterobject.') catch (e) console.log (e); Stap 3. Detecteer MIME-ondersteuning
Controleer na de supportcontrole ook de ondersteuning van het MIME-type. Als het MIME-type van het medium dat u wilt streamen, niet wordt ondersteund door de browser, waarschuw de gebruiker en gooi een fout.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Kan de media niet afspelen. Media van MIME-type' + mime + 'wordt niet ondersteund.'); throw ('Media van het type' + mime + 'wordt niet ondersteund.'); Houd er rekening mee dat het bovenstaande codefragment moet zijn geplaatst in de proberen blok, voor de vangst blokkeren (volg voor verwijzingen de regelnummering of bekijk het laatste JS-bestand op Github).
Stap 4. Koppel het
Maak een nieuw MediaSource object en wijs het toe als de bron van de label door de URL.createObjectURL () methode.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediabron); Stap 5. Voeg een toe SourceBuffer bezwaar tegen MediaSource
Wanneer een HTML-media-element toegang tot een mediabron en is er klaar voor creëren SourceBuffer voorwerpen, de MediaSource API vuurt een sourceopen evenement .
De SourceBuffer voorwerp bezit een brok media dat wordt uiteindelijk gedecodeerd, verwerkt en gespeeld. Een MediaSource object kan hebben meerdere SourceBuffer voorwerpen.
Binnen in de event handler van de sourceopen evenement, Voeg een ... toe SourceBuffer bezwaar tegen MediaSource met de addSourceBuffer () methode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Stap 6. Haal de media op
Nu dat je een hebt SourceBuffer object, het is tijd om haal het mp3-bestand op. In ons voorbeeld doen we dit door een AJAX-verzoek gebruiken.
Gebruik arraybuffer zoals responseType, welke geeft binaire gegevens aan. Wanneer het antwoord met succes is opgehaald, voeg het toe aan SourceBuffer met de appendBuffer () methode.
mediaSource.addEventListener (sourceopen "functie () 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; geval 404: throw 'Bestand niet gevonden'; default: throw 'Kan de fetch bestand '; catch (e) console.error (e);; xhr.send (););
Stap 7. Geef het einde van de stream aan
Wanneer de API klaar is met het toevoegen van de gegevens aan SourceBuffer een evenement genoemd updatend is ontslagen. In een gebeurtenishandler belt u de endOfStream () methode van MediaSource naar geven aan dat de stream is beëindigd.
mediaSource.addEventListener (sourceopen "functie () 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 "functie (_) mediaSource.endOfStream (); ); break; geval 404: throw 'bestand niet gevonden'; default: throw 'Kan het bestand niet te halen'; catch (e) console.error (e);; xhr.send ();) ;
Stap 8. Afkappen van het mediabestand
De SourceBuffer object heeft twee eigenschappen riep appendWindowStart en appendWindowEnd het vertegenwoordigen van de begin- en eindtijd van de mediadata je wilt filteren. De gemarkeerde code hieronder filtert de eerste vier seconden van de MP3.
mediaSource.addEventListener (sourceopen "functie () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4,0; ...);
demonstratie
En dat is alles, onze audiomonster wordt gestreamd rechtstreeks vanaf de webpagina. Voor de broncode, kijk eens naar onze Github repo en voor het eindresultaat, kijk op de demopagina.
Browserondersteuning
Vanaf het schrijven van dit bericht, de MediaSource API wordt officieel ondersteund in alle belangrijke browsers. Maar het testen toont aan dat het implementatie is buggy in Firefox, en Webkit-browsers hebben nog steeds problemen met de appendWindowStart eigendom.
Zoals de MediaSource API is nog in de experimentele fase, de toegang tot hogere bewerkingsfuncties is mogelijk beperkt, maar de standaard streaming functie is iets wat je kunt gebruik meteen.
