Kā straumēt atdalītu audio, izmantojot MediaSource API
Ar MediaSource API, jūs varat ģenerēt un konfigurēt multivides plūsmas tieši pārlūkprogrammā. Tas ļauj jums veikt dažādus mediju datus glabā ar plašsaziņas līdzekļiem saistītus HTML tagus, piemēram, vai . Piemēram, varat sajauciet dažādas plūsmas, izveidot pārklājošu mediju, slinks kravas nesējs, un rediģēt multivides rādītājus piemēram, mainīt skaļumu vai frekvenci.
Šajā ziņojumā mēs īpaši redzēsim, kā to izdarīt straumēt audio paraugu (saīsināts MP3 fails) ar MediaSource API tiesības pārlūkprogrammā priekšnesuma mūzika jūsu auditorijai. Mēs aptversim, kā noteikt API atbalstu, kā savienojiet HTML multivides elementu API, kā to izdarīt ielādējiet mediju izmantojot Ajax, un visbeidzot, kā plūsma.
Ja jūs vēlaties iepriekš redzēt, ko mēs esam, apskatiet avota kods Github, vai izbraukšana demonstrācijas lapa.
1. solis. Izveidojiet HTML
Lai izveidotu HTML, pievienojiet atzīme ar a kontroli atribūts uz jūsu lapu. Arī atgriezeniskai savietojamībai pievienot noklusējuma kļūdas ziņojumu lietotājiem, kuru pārlūkprogrammas neatbalsta šo funkciju. Lai ieslēgtu / izslēgtu šo ziņojumu, mēs izmantosim JavaScript.
2. solis. Noteikt pārlūkprogrammas atbalstu
Programmā JavaScript izveidojiet a mēģiniet… noķert bloķēt to mest kļūdu ja MediaSource API netiek atbalstīts pēc lietotāja pārlūka vai, citiem vārdiem sakot, ja MediaSource (atslēga) neeksistē iekš logu objektu.
mēģiniet if (! 'MediaSource' logā) mest jaunu ReferenceError ('Loga objektā nav MediaSource īpašuma.') catch (e) console.log (e); 3. solis. Noteikt MIME atbalstu
Pēc atbalsta pārbaudes pārbaudiet arī MIME tipa atbalsts. Ja pārlūks neatbalsta multivides MIME veidu, kuru vēlaties straumēt, brīdināt lietotāju un mest kļūdu.
var mime = 'audio / mpeg'; ja (! MediaSource.isTypeSupported (mime)) brīdinājums (“Nevar atskaņot multividi. MIME tips“ + mime + ”netiek atbalstīts.”); mest (netiek atbalstīts “Mime + + mime +” veids. ”);
Ņemiet vērā, ka iepriekš minētajam koda fragmentam jābūt iekšpusē mēģiniet bloķēt, pirms nozvejas bloks (atsaucei, sekojiet līnijas numerācijai vai pārbaudiet galīgo JS failu Github).
4. solis. Saite
Izveidojiet jaunu MediaSource objektu un piešķirt to kā. \ t tag izmantojot URL.createObjectURL () metodi.
var audio = document.querySelector ('audio'), mediaSource = jauns MediaSource (); audio.src = URL.createObjectURL (mediaSource); 5. solis SourceBuffer iebilst MediaSource
Kad HTML multivides elements piekļūst multivides avotam un ir gatava izveidot SourceBuffer objektiem, MediaSource API ugunsgrēki a sourceopen notikumu .
The SourceBuffer objektu ir mediju gabals kas tiek dekodēts, apstrādāts un atskaņots. Viens MediaSource objekts var ir vairāki SourceBuffer objektiem.
Iekšpusē notikumu apstrādātājs sourceopen notikumu, pievienot a SourceBuffer iebilst MediaSource Ar addSourceBuffer () metodi.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime);); 6. solis. Ielādējiet multividi
Tagad, kad jums ir a SourceBuffer objekts, ir pienācis laiks ielādējiet MP3 failu. Mūsu piemērā mēs to darīsim izmantojot AJAX pieprasījumu.
Izmantot masybuffer kā answerType, kas apzīmē bināros datus. Kad atbilde ir veiksmīgi iegūta, pievienojiet to SourceBuffer Ar pievienojiet buferi () metodi.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = jauns XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = funkcija () try switch (this.status) lieta 200: sourceBuffer.appendBuffer (this.response); pārtraukums; lieta 404: mest “Fails nav atrasts”; noklusējums: mest “Neizdevās ielādēt file '; catch (e) console.error (e);; xhr.send ();); 7. solis. Norādiet straumes beigas
Kad API ir pabeigusi datu pievienošanu SourceBuffer a notikums sauc atjaunināt tiek atlaists. Notikumu apstrādātāja ietvaros zvaniet uz straumes beigas() metode MediaSource uz norāda, ka plūsma ir beigusies.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); var xhr = jauns XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = funkcija () try switch (this.status) lieta 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', funkcija (_) mediaSource.endOfStream (); 404: mest “Fails nav atrasts”; noklusējums: mest “Neizdevās ielādēt failu”; nozvejas (e) console.error (e);; xhr.send ();) ; 8. solis. Samaziniet multivides failu
The SourceBuffer objektam ir divas īpašības sauc appendWindowStart un appendWindowEnd kas pārstāv mediju datu sākuma un beigu laiks kuru vēlaties filtrēt. Izceltais kods zemāk filtrē pirmās četras sekundes MP3.
mediaSource.addEventListener ('sourceopen', funkcija () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
Un tas viss, mūsu audio paraugs tiek straumēts tieši no tīmekļa lapas. Priekš avota kods, apskatīt mūsu Github repo un par galīgo rezultātu, pārbaudiet demonstrācijas lapa.
Pārlūka atbalsts
Kā rakstīt šo amatu, MediaSource API tiek oficiāli atbalstīta visās galvenajās pārlūkprogrammās. Bet testēšana liecina, ka ieviešana ir buggy Firefox, un Webkit pārlūkprogrammām joprojām ir problēmas ar appendWindowStart īpašums.
Tā kā ir MediaSource API vēl eksperimentālajā posmā, piekļuve augstākām rediģēšanas funkcijām var būt ierobežota, bet pamata straumēšana funkcija ir kaut kas, ko varat izmantot tūlīt.
