Kaip transliuoti sutrumpintą garsą naudojant „MediaSource“ API
Su „MediaSource“ API, tu gali generuoti ir konfigūruoti medijos srautus tiesiai naršyklėje. Tai leidžia jums atlikti įvairias žiniasklaidos duomenų operacijas laikomi su žiniasklaida susiję HTML žymenys, pvz., arba . Pavyzdžiui, galite sumaišykite skirtingus srautus, sukurti persidengiančią mediją, tingus krovinių laikmenos, ir redaguoti medijos metriką pvz., keisti garsumą arba dažnį.
Šiame pranešime konkrečiai pamatysime, kaip transliuoti garso mėginį (sutrumpintas MP3 failas) su „MediaSource“ API teisingai naršyklėje iš anksto rodoma muzika savo auditorijai. Mes apimsime, kaip aptikti API palaikymą, kaip prijunkite HTML laikmenos elementą į API, kaip parsisiųsti žiniasklaidą per „Ajax“ ir galiausiai kaip srautas.
Jei norite iš anksto pamatyti, ką mes turime, pažvelkite į šaltinio kodas „Github“, arba patikrinkite demonstracinis puslapis.
1 žingsnis. Sukurkite HTML
Norėdami sukurti HTML, pridėkite žyma su a kontrolės priemones atributas į savo puslapį. Taip pat ir atgalinis suderinamumas pridėti numatytąjį klaidos pranešimą naudotojams, kurių naršyklės nepalaiko šios funkcijos. Norėdami įjungti / išjungti šį pranešimą, naudosime „JavaScript“.
2. Nustatykite naršyklės palaikymą
„JavaScript“ sukurkite a pabandykite ... sugauti blokuoti, kad bus mesti klaidą jei „MediaSource API“ nepalaikoma vartotojo naršyklėje arba, kitaip tariant, jei „MediaSource“ (raktas) neegzistuoja viduje konors langas objektą.
pabandykite if (! 'MediaSource' langelyje) mesti naują ReferenceError („Nėra„ MediaSource “savybės lango objekte.) catch (e) console.log (e);
3. Nustatykite MIME palaikymą
Po paramos patikrinimo taip pat patikrinkite, ar nėra MIME tipo palaikymas. Jei naršyklė nepalaiko norimos srauto MIME tipo, įspėti vartotoją ir mesti klaidą.
var mime = 'audio / mpeg'; jei (! MediaSource.isTypeSupported (mime)) įspėjimas („Nepavyksta atkurti medijos.„ MIME “tipo žiniasklaida„ + mime + “nepalaikoma.“); mesti („Media“ tipo „+ mime +“ nėra palaikoma. “);
Atminkite, kad pirmiau nurodytas kodo fragmentas turi būti viduje bandyti blokuoti, prieš sugauti blokas (nuoroda, vadovaukitės eilutės numeracija arba patikrinkite galutinį JS failą „Github“).
4 žingsnis. Susieti
Sukurkite naują „MediaSource“ objektą, ir priskirti jį kaip žyma naudojant URL.createObjectURL () metodas.
var audio = document.querySelector („audio“), mediaSource = naujas „MediaSource“ (); audio.src = URL.createObjectURL (mediaSource);
5 veiksmas. Pridėti a „SourceBuffer“ prieštarauja „MediaSource“
Kai HTML medijos elementas pasiekia medijos šaltinį ir yra pasirengęs sukurti „SourceBuffer“ objektų, „MediaSource API“ gaisrai a šaltinis įvykis .
The „SourceBuffer“ objektą turi žiniasklaidos gabalą kuri galiausiai dekoduojama, apdorojama ir grojama. Vienas „MediaSource“ objektas gali turėti daugybę „SourceBuffer“ objektų.
Viduje renginio tvarkytojas šaltinis įvykis, Pridėti „SourceBuffer“ prieštarauja „MediaSource“ su addSourceBuffer () metodas.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime);); 6. Pakelkite laikmeną
Dabar, kai turite „SourceBuffer“ objektas, atėjo laikas parsisiųsti MP3 failą. Mūsų pavyzdyje mes tai padarysime naudojant AJAX užklausą.
Naudokite masybuffer kaip answerType, kuris žymi dvejetainius duomenis. Kai atsakymas bus sėkmingai atsiųstas, pridėti jį prie „SourceBuffer“ su pridėtiBuffer () metodas.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = naujas XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); pertrauka; atvejis 404: mesti „Failas nerastas“, numatytasis: mesti „Nepavyko atsiųsti file '; catch (e) console.error (e);; xhr.send ();); 7. Nurodykite srauto pabaigą
Kai API baigia pridėti duomenis prie „SourceBuffer“ a įvykis vadinamas atnaujinti yra atleistas. Įvykio tvarkytojo viduje skambinkite endOfStream () metodas „MediaSource“ į rodo, kad srautas baigėsi.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = naujas XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = funkcija () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener („updateend“, funkcija (_) mediaSource.endOfStream (); 404: mesti „Failas nerastas“; numatytasis: mesti „Nepavyko gauti failo“; gaudyti (e) console.error (e);; xhr.send ();) ; 8. Trumpinkite medijos failą
The „SourceBuffer“ objektas dvi savybės vadinamas pridėtiWindowStart ir pridėtiWindowEnd atstovauja žiniasklaidos duomenų pradžios ir pabaigos laikas norite filtruoti. Pažymėtas kodas toliau filtruoja pirmąsias keturias sekundes MP3.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
Ir visa tai, mūsų garso mėginys yra transliuojamas tiesiai iš tinklalapio. Už pirminis kodas, pažvelkite į mūsų Github repo ir dėl galutinio rezultato patikrinkite demonstracinis puslapis.
Naršyklės palaikymas
Kaip rašyti šį pranešimą, „MediaSource“ API yra oficialiai palaikoma visose pagrindinėse naršyklėse. Tačiau bandymai rodo, kad „Firefox“ diegimas yra klaidingas, ir Webkit naršyklės vis dar turi problemų pridėtiWindowStart nuosavybė.
Kaip yra „MediaSource“ API vis dar eksperimentiniame etape, prieiga prie aukštesnių redagavimo funkcijų gali būti ribota, bet pagrindinis transliavimas funkcija yra kažkas, ką galite iš karto pasinaudoti.
