Slik strekker du avkortet lyd ved hjelp av MediaSource API
Med MediaSource API, du kan generere og konfigurere mediestrømmer rett i nettleseren. Det tillater deg å Utfør en rekke operasjoner på mediedata holdt av medierelaterte HTML-koder som eller . For eksempel kan du bland forskjellige strømmer, skape overlappende medier, lat lastmedia, og rediger medieverdier for eksempel endre volum eller frekvens.
I dette innlegget vil vi spesielt se hvordan Stream en lydprøve (en avkortet MP3-fil) med MediaSource API rett i nettleseren for å kunne pre-show musikk til publikum. Vi skal dekke hvordan oppdag støtte for API, hvordan koble HTML-medieelementet til API, hvordan hente media via Ajax, og til slutt hvordan strøm det.
Hvis du vil se på forhånd hva vi skal gjøre, ta en titt på kildekoden på Github, eller sjekk ut demo side.
Trinn 1. Lag HTML
For å lage HTML, legg til en tag med a kontroller Egenskap til siden din. For bakoverkompatibilitet, også legg til en standard feilmelding for brukere hvis nettlesere ikke støtter funksjonen. Vi vil bruke JavaScript for å slå på / av denne meldingen.
Trinn 2. Oppdag nettleserstøtte
I JavaScript lager du en prøv ... fange blokkere det vil kaste en feil hvis MediaSource API støttes ikke av brukerens nettleser, eller med andre ord hvis Mediasource (nøkkelen) eksisterer ikke i vindu gjenstand.
prøv if (! 'MediaSource' i vinduet) kaste nye ReferenceError ('Det finnes ingen MediaSource-egenskap i vinduobjekt.' catch (e) console.log (e); Trinn 3. Oppdag MIME-støtte
Etter støttekontrollen, sjekk også for støtte av MIME-typen. Hvis MIME-typen av mediet du vil streame, støttes ikke av nettleseren, varsl brukeren og kaste en feil.
var mime = 'audio / mpeg'; hvis (! MediaSource.isTypeSupported (mime)) alert ('Kan ikke spille av media. Media of MIME type' + mime + 'støttes ikke.'); kaste ('Media of type' + mime + 'støttes ikke.'); Merk at kodestykket ovenfor må være plassert inne i prøve blokkere, før å fange blokk (for referanse, følg linjenummeringen eller sjekk ut den endelige JS-filen på Github).
Trinn 4. Koble til
Lage en ny Mediasource objekt og tilordne det som kilde til stikkord ved å bruke URL.createObjectURL () metode.
var lyd = document.querySelector ('audio'), mediaSource = ny MediaSource (); audio.src = URL.createObjectURL (mediaSource); Trinn 5. Legg til en SourceBuffer ha innvendinger Mediasource
Når et HTML-medieelement tilgang til en mediekilde og er klar til skape SourceBuffer objekter, MediaSource API brenner a sourceopen begivenhet .
De SourceBuffer gjenstand har en del av media som til slutt avkodes, behandles og spilles. En eneste Mediasource objekt kan har flere SourceBuffer objekter.
Inne i hendelseshåndterer av sourceopen begivenhet, Legg til en SourceBuffer ha innvendinger Mediasource med addSourceBuffer () metode.
mediaSource.addEventListener ('sourceopen', funksjon () var sourceBuffer = this.addSourceBuffer (mime);); Trinn 6. Hent media
Nå som du har en SourceBuffer objekt, det er på tide å hente MP3-filen. I vårt eksempel vil vi gjøre det ved bruker en AJAX-forespørsel.
Bruk arraybuffer som responseType, hvilken Betegner binære data. Når svaret hentes vellykket, legg det til SourceBuffer med appendBuffer () metode.
mediaSource.addEventListener ('sourceopen', funksjon () 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) tilfelle 200: sourceBuffer.appendBuffer (this.response); break; case 404: kaste 'File Not Found'; standard: kaste 'Kunne ikke hente fil '; fangst (e) console.error (e);; xhr.send ();); Trinn 7. Angi slutten av strømmen
Når API-en er ferdig, legger du dataene til SourceBuffer en hendelse kalt updatend er sparken. Inne i en hendelseshåndterer, ring på endOfStream () Metode av Mediasource til indikere at strømmen er avsluttet.
mediaSource.addEventListener ('sourceopen', funksjon () 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) tilfelle 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('oppdatering', funksjon (_) mediaSource.endOfStream (); ); pause 404: kaste 'fil ikke funnet'; standard: kaste 'Kunne ikke hente filen'; fange (e) console.error (e);; xhr.send ();) ; Trinn 8. Avkort mediafilen
De SourceBuffer objektet har to egenskaper kalt appendWindowStart og appendWindowEnd representerer start og sluttid for mediedataene du vil filtrere. Den uthevede koden nedenfor filtrerer de første fire sekundene av MP3.
mediaSource.addEventListener ('sourceopen', funksjon () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...); Demo
Og det er alt vårt lydprøve streames rett fra nettsiden. For kildekode, ta en titt på vår Github repo og for det endelige resultatet, sjekk ut demo side.
Nettleserstøtte
Som ved å skrive dette innlegget, Mediasource API støttes offisielt i alle de store nettleserne. Men testen viser at implementering er buggy i Firefox, og webkit nettlesere har fortsatt problemer med appendWindowStart eiendom.
Som MediaSource API er fortsatt i sitt eksperimentelle stadium, tilgang til høyere redigeringsfunksjoner kan være begrenset, men grunnleggende streaming funksjonen er noe du kan gjøre bruk av med en gang.
