Kako strujati skraćeni audio pomoću MediaSource API-ja
Sa MediaSource API, možeš generirati i konfigurirati medijske tokove izravno u pregledniku. To vam omogućuje izvršiti različite operacije na medijskim podacima drže HTML oznake povezane s medijima, kao što su ili . Na primjer, možete miješajte različite struje, stvoriti preklapajuće medije, lijeni mediji za učitavanje, i uredite podatke o medijima kao što je promjena glasnoće ili frekvencije.
U ovom postu posebno ćemo vidjeti kako stream audio uzorak (skraćena MP3 datoteka) s oznakom MediaSource API pravo u pregledniku kako biste glazbu prije prikazivanja svojoj publici. Mi ćemo pokriti kako otkrivanje podrške za API, kako da spojite HTML element medija na API, kako dohvatiti medije preko Ajaxa, i konačno kako potok.
Ako želite unaprijed vidjeti što smjeramo, pogledajte u izvorni kod na Githubu, ili provjerite demo stranicu.
Korak 1. Stvorite HTML
Da biste stvorili HTML, dodajte s oznakom kontrole atribut na svoju stranicu. Za kompatibilnost unatrag također dodaj zadanu poruku o pogrešci za korisnike čiji preglednici ne podržavaju tu značajku. Mi ćemo koristiti JavaScript za uključivanje / isključivanje ove poruke.
Korak 2. Otkrivanje podrške preglednika
U JavaScriptu izradite pokušaj uhvatiti blokirat će to baciti pogrešku ako MediaSource API nije podržan preglednik korisnika ili, s drugim riječima, ako MediaSourcea (ključ) ne postoji u prozor objekt.
pokušajte if (! 'MediaSource' u prozoru) bacite novu ReferenceError ('Nema objekta MediaSource u objektu prozora.') catch (e) console.log (e); Korak 3. Otkrivanje MIME podrške
Nakon provjere podrške provjerite i za podršku tipa MIME. Ako preglednik ne podržava MIME vrstu medija koji želite emitirati, upozorite korisnika i baciti pogrešku.
var mime = 'audio / mpeg'; ako (! MediaSource.isTypeSupported (mime)) alert ('Ne mogu se reproducirati mediji. Mediji tipa MIME' + mime + 'nisu podržani.'); throw ('Mediji tipa' + mime + 'nije podržan.'); Napominjemo da isječak koda iznad mora biti postavljene unutar probati blok, prije ulov blok (za referencu, slijedite numeriranje linije ili provjerite konačnu JS datoteku na Githubu).
Korak 4. Povežite
Stvorite novo MediaSourcea objekt, i dodijelite ga kao izvor označiti pomoću URL.createObjectURL () način.
var audio = document.querySelector ('audio'), mediaSource = novi MediaSource (); audio.src = URL.createObjectURL (mediaSource); Korak 5. Dodajte a SourceBuffer objekt MediaSourcea
Kada HTML element medija pristupa izvoru medija i spreman je stvoriti SourceBuffer objekti, API za MediaSource požari sourceopen događaj .
SourceBuffer objekt drži komad medija koji se na kraju dekodira, obrađuje i reproducira. Jedan MediaSourcea objekt može imati više SourceBuffer objekti.
Unutar događaj rukovatelj sourceopen događaj, dodati SourceBuffer objekt MediaSourcea s addSourceBuffer () način.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime);); Korak 6. Dohvatite medije
Sada kada imate SourceBuffer objekt, vrijeme je dohvatiti MP3 datoteku. U našem primjeru, učinit ćemo to do kraja pomoću AJAX zahtjeva.
Koristiti arraybuffer kao responseType, koji označava binarne podatke. Kada se odgovor uspješno dohvati, dodajte ga SourceBuffer s appendBuffer () način.
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) slučaj 200: sourceBuffer.appendBuffer (this.response); break; case 404: bacite 'File Not Found'; default: throw 'Nije uspjelo dohvatiti file '; catch (e) console.error (e);; xhr.send ();); Korak 7. Označite kraj potoka
Kada API završi s dodavanjem podataka SourceBuffer poziv updatend je ispaljen. Unutar rukovatelja događaja, nazovite endOfStream () metoda MediaSourcea do označava da je tok završio.
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) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); 404: baciti 'Datoteka nije pronađena'; default: baciti 'Nije uspjelo dohvatiti datoteku'; uhvatiti (e) console.error (e);; xhr.send ();) ; Korak 8. Skratite medijsku datoteku
SourceBuffer objekt ima dva svojstva zvao appendWindowStart i appendWindowEnd koji predstavljaju vrijeme početka i završetka medijskih podataka želite filtrirati. Označeni kôd u nastavku filtrira prve četiri sekunde MP3.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
I to je sve, naše audio uzorak se struji izravno s web-stranice. Za izvorni kod, pogledajte naš Github repo i za konačni rezultat provjerite demo stranicu.
Podrška za preglednik
Što se tiče pisanja ovog posta, MediaSourcea API je službeno podržan u svim većim preglednicima. Ali testiranje pokazuje da je implementacija je lud u Firefoxu, Webkit preglednici i dalje imaju poteškoća s appendWindowStart svojstvo.
Kao što je MediaSource API još uvijek u eksperimentalnoj fazi, pristup funkcijama višeg uređivanja može biti ograničen, ali osnovno strujanje značajka je nešto što možete odmah iskoristiti.
