Kuidas kärbitud heli voogesitada MediaSource API abil
Koos MediaSource API, sa saad luua ja konfigureerida meediumivooge otse brauseris. See võimaldab teil teostada erinevaid meediumiandmeid peetakse meediaga seotud HTML-sildid, näiteks või . Näiteks saate segada erinevaid voogusid, luua kattuvaid meediume, laisk laadimiskandjad, ja redigeeri meedia meetrikaid näiteks helitugevuse või sageduse muutmine.
Selles postituses näeme, kuidas seda teha audio-proovi voogesitus (kärbitud MP3-fail) MediaSource API otse brauseris, et esitlusmuusika oma publikule. Me katame kuidas tuvastada API toetused, kuidas ühendage HTML-meediaelement API-le, kuidas laadige meedia Ajaxi kaudu ja lõpuks kuidas oota seda.
Kui soovite eelnevalt näha, mida me oleme, vaadake seda lähtekood Githubis, või vaadake demo leht.
1. samm. Loo HTML
HTML-i loomiseks lisage sildiga a kontrolli atribuut oma lehele. Tagasi ühilduvuse jaoks lisage vaikeveateade kasutajatele, kelle brauserid seda funktsiooni ei toeta. Selle sõnumi sisselülitamiseks / väljalülitamiseks kasutame JavaScripti.
2. samm. Avastage brauseri tugi
Looge JavaScriptis a proovige… püüda blokeerige see vea kui MediaSource API-d ei toetata kasutaja brauseri poolt või, teiste sõnadega, kui MediaSource (võti) ei eksisteeri Euroopa aken objekti.
proovige if (! 'MediaSource' aknas) visata uus ReferenceError ('aknas ei ole MediaSource omadust.') catch (e) console.log (e); 3. samm. Avastage MIME tugi
Pärast toe kontrollimist kontrollige ka MIME tüübi tugi. Kui brauser ei toeta meediumitüüpi, mida soovite voogesitada, hoiatage kasutajat ja vea.
var mime = 'audio / mpeg'; kui (! MediaSource.isTypeSupported (mime)) alarm ('Meedia ei saa esitada. MIME-tüüpi meediumitüüp' + mime + 'pole toetatud.'); visata ('Meedia tüüpi' + mime + 'ei ole toetatud.'); Pange tähele, et ülaltoodud koodilõik peab olema paigutatud proovige blokeeri, enne saak plokk (viide, järgige rea numbrit või vaadake lõplikku JS-faili Githubis).
4. samm
Looge uus MediaSource objekti ja määrata see selle allikaks silt kasutades URL.createObjectURL () meetod.
var audio = document.querySelector ('audio'), mediaSource = uus MediaSource (); audio.src = URL.createObjectURL (mediaSource); 5. samm SourceBuffer vastu MediaSource
Kui HTML-meediaelement avab meediaallika ja on valmis luua SourceBuffer objektid, MediaSource API tulekahjud a sourceopen sündmus .
The SourceBuffer objekti omab rida meediat mis on lõpuks dekodeeritud, töödeldud ja mängitud. Üksik MediaSource objekti saab on mitu SourceBuffer objektid.
Sisse sündmuste käitleja sourceopen sündmus, Lisa SourceBuffer vastu MediaSource koos addSourceBuffer () meetod.
mediaSource.addEventListener ('sourceopen', funktsioon () var sourceBuffer = this.addSourceBuffer (mime);); 6. samm. Laadige meedia
Nüüd, kui teil on SourceBuffer objekt, on aeg tõmmake MP3-fail. Meie näites teeme seda kasutades AJAXi taotlust.
Kasutage masibuffer nagu vastuse tüüp, mis tähistab binaarandmeid. Kui vastus on edukalt tõmmatud, lisage see SourceBuffer koos lisageBuffer () meetod.
mediaSource.addEventListener ('sourceopen', funktsioon () var sourceBuffer = this.addSourceBuffer (mime); var xhr = uus XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); katkestus; juhtum 404: visata 'fail ei leitud'; vaikimisi: viska ' file '; catch (e) console.error (e);; xhr.send ();); 7. samm. Näidake voo lõppu
Kui API on andmete lisamise lõpetanud SourceBuffer a sündmus kutsutakse uuendamine on vallandatud. Sündmuse käitleja sees helistage endOfStream () meetod MediaSource kuni näitavad, et oja on lõppenud.
mediaSource.addEventListener ('sourceopen', funktsioon () var sourceBuffer = this.addSourceBuffer (mime); var xhr = uus XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); ; juhtum 404: visata 'Faili ei leitud'; vaikimisi: viska 'Faili tõmbamine nurjus'; saak (e) console.error (e);; xhr.send ();) ; 8. samm. Katkesta meediumifail
The SourceBuffer objektil on kaks omadust kutsus appendWindowStart ja lisageWindowEnd esindavad meediaandmete algus- ja lõpuaeg soovite filtreerida. Alltoodud esiletõstetud kood filtreerib esimesed neli sekundit MP3.
mediaSource.addEventListener ('sourceopen', funktsioon () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
Ja see on kõik, meie heli näidis on voogesitatud otse veebilehelt. Selle eest lähtekood, vaata meie Github repo ja lõpptulemuse saamiseks vaadake demo leht.
Brauseri tugi
Selle kirja kirjutamisest alates MediaSource API-d toetatakse ametlikult kõigis suuremates brauserites. Kuid testimine näitab, et rakendamine on Firefoxis lollakas, ja Webkit brauseritel on ikka veel probleeme appendWindowStart vara.
Kuna MediaSource API on veel eksperimentaalses etapis, juurdepääs kõrgematele redigeerimisfunktsioonidele võib olla piiratud, kuid striimimine funktsioon on midagi, mida saate kasutage kohe.
