Kako pretakati okrnjen zvok z uporabo vmesnika MediaSource API
Z API za MediaSource, ti lahko ustvarjanje in konfiguriranje medijskih tokov v brskalniku. To vam omogoča izvedejo različne operacije na medijskih podatkih ki jih vsebujejo oznake, povezane z mediji, kot so ali . Na primer, lahko mešajte različne tokove, ustvarjanje prekrivajočih se medijev, leni obremenilni mediji, in uredite meritve medijev kot je sprememba glasnosti ali frekvence.
V tem prispevku bomo natančno videli, kako pretaknite zvočni vzorec (skrajšana datoteka MP3) z API za MediaSource v brskalniku pred-predvajanje glasbe občinstvu. Preučili bomo, kako zaznavanje podpore za API, kako povežite element medija HTML API, kako prenesite medije preko Ajaxa in končno, kako potok.
Če želite vnaprej videti, kaj počnemo, si oglejte izvorno kodo na Githubu, ali preverite demo stran.
1. Ustvarite HTML
Če želite ustvariti HTML, dodajte z oznako kontrole atribut na svojo stran. Za združljivost za nazaj, tudi dodajte privzeto sporočilo o napaki za uporabnike, katerih brskalniki ne podpirajo te funkcije. Za vklop / izklop tega sporočila bomo uporabili JavaScript.
Korak 2. Zaznavanje podpore brskalnika
V JavaScriptu ustvarite poskusite ... ulovite blokirajte to vrgel napako če API za MediaSource ni podprt brskalnika uporabnika ali z drugimi besedami, če MediaSource (ključ) ne obstaja v okno predmet.
poskusite if (! 'MediaSource' v oknu) vrgite novo ReferenceError ('Lastnost MediaSource v objektu okna.') catch (e) console.log (e); 3. odkrijte podporo MIME
Po preverjanju podpore preverite tudi za podpora tipa MIME. Če brskalnik ne podpira tipa MIME medija, ki ga želite pretakati, opozorilo uporabnika in vrgel napako.
var mime = 'avdio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Ne morem predvajati medija. Mediji tipa MIME' + mime + 'ni podprt.'); throw (»Media tipa« + mime + »ni podprt.«); Upoštevajte, da mora biti odrezek kode zgoraj v notranjosti poskusite blok, pred ulov blok (za referenco sledite oštevilčenju vrstic ali si oglejte končno datoteko JS v Githubu).
Korak 4. Povežite
Ustvarite novo MediaSource predmet, in dodeli kot vir oznaka z uporabo URL.createObjectURL () metodo.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Korak 5. Dodajte a SourceBuffer nasprotovati MediaSource
Ko je element medija HTML dostopa do vira medijev in je pripravljen ustvarite SourceBuffer predmetov, API za MediaSource požari a vir dogodka .
The SourceBuffer predmet ima kos medijev ki se sčasoma dekodira, obdeluje in predvaja. Samski MediaSource predmet lahko imajo več SourceBuffer predmetov.
V notranjosti . \ t vir dogodka, dodajte a SourceBuffer nasprotovati MediaSource z addSourceBuffer () metodo.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime);); Korak 6. Prenesite medij
Zdaj, ko imate SourceBuffer predmet, je čas prenesi datoteko MP3. V našem primeru bomo to storili do konca z zahtevo AJAX.
Uporaba arraybuffer kot responseType, ki označuje binarne podatke. Ko je odgovor uspešno prevzet, dodajte SourceBuffer z appendBuffer () metodo.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = novo XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) primer 200: sourceBuffer.appendBuffer (this.response); break; case 404: met 'File Not Found'; default: throw 'Ni bilo mogoče prenesti file '; catch (e) console.error (e);; xhr.send ();); 7. Navedite konec toka
Ko API doda podatke v SourceBuffer a imenovan dogodek posodabljati je odpuščen. V upravljalniku dogodkov pokličite Konec toka() metodo. \ t MediaSource do označuje, da se je tok končal.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = novo XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) primer 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); 404: vrgel 'Datoteka ni najdena', privzeto: vrgel 'Neuspelo pridobivanje datoteke'; ulov (e) console.error (e);; xhr.send ();) ; Korak 8. Izrežite predstavnostno datoteko
The SourceBuffer predmet ima dve lastnosti imenuje appendWindowStart in appendWindowEnd ki predstavljajo. \ t začetni in končni čas medijskih podatkov želite filtrirati. Označena koda spodaj filtrira prve štiri sekunde MP3.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
In to je vse, naše zvočni vzorec je pretočen na spletni strani. Za izvorno kodo, si oglejte našo Github repo in za končni rezultat preverite demo stran.
Podpora za brskalnik
Od pisanja te objave MediaSource API je uradno podprt v vseh večjih brskalnikih. Toda testiranje kaže, da Izvajanje je v programu Firefox moteno, in brskalniki Webkit imajo še vedno težave z appendWindowStart nepremičnine.
Kot je vmesnik MediaSource API še v poskusni fazi, dostop do funkcij višjega urejanja je lahko omejen, vendar osnovno pretakanje funkcija je nekaj, kar lahko takoj uporabite.
