Sådan streams afkortet lyd ved hjælp af MediaSource API
Med MediaSource API, du kan generere og konfigurere mediestrømme lige i browseren. Det giver dig mulighed for udføre en række operationer på mediedata indeholdt af medie-relaterede HTML-tags som f.eks eller . For eksempel kan du bland forskellige streams, skabe overlappende medier, dovne belastningsmedier, og rediger medie beregninger som f.eks. ændre lydstyrken eller frekvensen.
I dette indlæg vil vi specifikt se hvordan stream en lydprøve (en afkortet MP3-fil) med MediaSource API lige i browseren for at kunne pre-show musik til dit publikum. Vi vil dække hvordan opdage støtte til API'en, hvordan Tilslut HTML-medieelementet til API, hvordan hent medierne via Ajax, og endelig hvordan stream det.
Hvis du gerne vil se på forhånd, hvad vi skal gøre, så tag et kig på kildekode på Github, eller tjek den demo side.
Trin 1. Opret HTML
For at oprette HTML, tilføj en tag med a kontroller attribut til din side. Til bagudkompatibilitet, også Tilføj en standard fejlmeddelelse for brugere, hvis browsere ikke understøtter funktionen. Vi vil bruge JavaScript til at tænde / slukke denne besked.
Trin 2. Opdag browserens support
I JavaScript opretter du en prøv ... fange blokere det vil kaste en fejl hvis MediaSource API understøttes ikke af brugerens browser eller med andre ord hvis MediaSource (nøglen) eksisterer ikke i vindue objekt.
prøv if (! 'MediaSource' i vinduet) kaste nye ReferenceError ('Der er ingen MediaSource-egenskab i vinduesobjekt.') catch (e) console.log (e); Trin 3. Opdag MIME-support
Efter supportkontrol skal du også tjekke for understøttelse af MIME-typen. Hvis MIME-typen af det medie, du vil streame, ikke understøttes af browseren, advarsel brugeren og kaste en fejl.
var mime = 'audio / mpeg'; hvis (! MediaSource.isTypeSupported (mime)) alert ('Kan ikke afspille medier. Media of MIME type' + mime + 'understøttes ikke.'); kaste ('Media of type' + mime + 'understøttes ikke.'); Bemærk at kodestykket ovenfor skal være placeret inde i prøve blok, før fangst blok (til reference, følg linjenummeringen eller tjek den endelige JS-fil på Github).
Trin 4. Link den
Opret en ny MediaSource objekt og tildele det som kilde til tag ved at bruge URL.createObjectURL () metode.
var audio = document.querySelector ('audio'), mediaSource = ny MediaSource (); audio.src = URL.createObjectURL (mediaSource); Trin 5. Tilføj en SourceBuffer protestere mod MediaSource
Når et HTML-medieelement adgang til en mediekilde og er klar til skab SourceBuffer objekter, MediaSource API brænder a sourceopen begivenhed .
Det SourceBuffer objekt har en masse medier det bliver til sidst afkodet, behandlet og spillet. En enkelt MediaSource objekt kan har flere SourceBuffer objekter.
Inde i event handlinger af sourceopen begivenhed, Tilføj en SourceBuffer protestere mod MediaSource med addSourceBuffer () metode.
mediaSource.addEventListener ('sourceopen', funktion () var sourceBuffer = this.addSourceBuffer (mime);); Trin 6. Hent medierne
Nu hvor du har en SourceBuffer objekt, det er tid til hent MP3-filen. I vores eksempel gør vi det ved ved hjælp af en AJAX-anmodning.
Brug arraybuffer som responseType, hvilken betegner binære data. Når svaret hentes, tilføj det til SourceBuffer med appendBuffer () metode.
mediaSource.addEventListener ('sourceopen', funktion () var sourceBuffer = this.addSourceBuffer (mime); var xhr = ny XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () prøv switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: kaste 'Fil ikke fundet'; default: throw 'Kunne ikke hente fil '; fangst (e) console.error (e);; xhr.send ();); Trin 7. Angiv slutningen af strømmen
Når API'en er færdig med at tilføje data til SourceBuffer en begivenhed kaldet updatend er fyret. Indenfor en begivenhedshandler skal du ringe til endOfStream () metode til MediaSource til Angiv, at strømmen er afsluttet.
mediaSource.addEventListener ('sourceopen', funktion () var sourceBuffer = this.addSourceBuffer (mime); var xhr = ny XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () prøv switch (this.status) sag 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', funktion (_) mediaSource.endOfStream (); ); break; case 404: kaste 'File not Found'; default: kaste 'Kunne ikke hente filen'; catch (e) console.error (e);; xhr.send ();) ; Trin 8. Afkort mediefilen
Det SourceBuffer objekt har to egenskaber hedder appendWindowStart og appendWindowEnd repræsenterer start og sluttid for mediedataene du vil filtrere. Den fremhævede kode nedenfor filtrerer de første fire sekunder af MP3.
mediaSource.addEventListener ('sourceopen', funktion () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...); Demo
Og det er alt, vores lydprøve streames lige fra websiden. For kildekode, kig på vores Github repo og for det endelige resultat, tjek den demo side.
Browser support
Som ved at skrive dette indlæg, den MediaSource API understøttes officielt i alle større browsere. Men testen viser, at implementering er buggy i Firefox, og webkit browsere har stadig problemer med appendWindowStart ejendom.
Som MediaSource API er stadig i sin eksperimentelle fase, adgang til højere redigeringsfunktioner kan være begrænset, men grundlæggende streaming funktion er noget du kan gøre brug af med det samme.
