A csonkolt audió adatfolyamának közvetítése a MediaSource API használatával
A ... val MediaSource API, tudsz médiafolyamok létrehozása és konfigurálása közvetlenül a böngészőben. Ez lehetővé teszi különféle műveleteket végezhet a médiaadatokon a médiával kapcsolatos HTML-címkék, például: vagy . Például lehet keverjük össze a különböző folyamokat, átfedő média létrehozása, lusta betöltő média, és szerkessze a média metrikákat például a hangerő vagy a frekvencia megváltoztatása.
Ebben a bejegyzésben kifejezetten látni fogjuk, hogyan hangminta felvétele (csonkolt MP3 fájl) a MediaSource API jobbra a böngészőben zene előzetes bemutatása a közönségnek. Fogjuk fedezni, hogyan az API támogatásának észlelése, hogyan kell csatlakoztassa a HTML médiaelemet az API-hoz, hogyan letölteni a médiát az Ajaxon keresztül, és végül, hogyan patak.
Ha előre szeretné látni, hogy mi vagyunk, nézzük meg a forráskód a Githubon, vagy nézd meg a demóoldal.
1. lépés: Hozza létre a HTML-t
A HTML létrehozásához add hozzá a címke a ellenőrzések tulajdonság oldalára. A visszafelé kompatibilitás is adjon alapértelmezett hibaüzenetet azoknak a felhasználóknak, akiknek a böngészője nem támogatja a funkciót. Ezt az üzenetet a JavaScript használatával kapcsoljuk be.
2. lépés: A böngésző támogatásának észlelése
A JavaScript-ben hozzon létre egy próbáljon… elkapni blokkolja azt dobjon egy hibát ha a A MediaSource API nem támogatott a felhasználó böngészőjével, vagy más szóval ha MediaSource (a kulcs) nem létezik ban,-ben ablak tárgy.
próbálja if (! 'MediaSource' ablakban) dobja be az új ReferenceError-t ('A Windows objektumban nincs MediaSource tulajdonság.') catch (e) console.log (e); 3. lépés: MIME-támogatás észlelése
A támogatási ellenőrzés után ellenőrizze a a MIME típus támogatása. Ha a böngésző nem támogatja a streamelni kívánt média MIME-típusát, figyelmezteti a felhasználót és dobjon egy hibát.
var mime = 'audio / mpeg'; ha (! MediaSource.isTypeSupported (mime)) figyelmeztetés ('Nem tudja lejátszani a médiát. A MIME típusú média + + mime +' nem támogatott. '); dobás („A média + típusú média +” nem támogatott. ”); Ne feledje, hogy a fenti kódrészletnek tartalmaznia kell a próbáld ki Blokk, előtte fogás blokk (hivatkozásként kövesse a sorszámozást, vagy nézze meg a végleges JS fájlt a Githubon).
4. lépés
Újat csinálni MediaSource objektum, és hozzárendelje azt a címke a URL.createObjectURL () eljárás.
var audio = document.querySelector ('audio'), mediaSource = új MediaSource (); audio.src = URL.createObjectURL (mediaSource); 5. lépés SourceBuffer tiltakozni MediaSource
Amikor egy HTML médiaelemet használ hozzáfér egy médiaforráshoz és készen áll teremt SourceBuffer tárgyak, a MediaSource API-t tüzek a sourceopen esemény .
A SourceBuffer tárgy tart egy darab médiát amely végül dekódol, feldolgoz és lejátsz. Egyetlen MediaSource objektum többszörös SourceBuffer tárgyak.
Benne eseménykezelője sourceopen esemény, add a SourceBuffer tiltakozni MediaSource a ... val addSourceBuffer () eljárás.
mediaSource.addEventListener ('sourceopen', függvény () var sourceBuffer = this.addSourceBuffer (mime);); 6. lépés
Most, hogy van egy SourceBuffer objektum, itt az ideje letölteni az MP3 fájlt. Példánkban ezt megteszi AJAX-kéréssel.
Használat arraybuffer mint responseType, melyik bináris adatokat jelöl. Amikor a válasz sikeresen beolvasásra került, csatolja hozzá SourceBuffer a ... val appendBuffer () eljárás.
mediaSource.addEventListener ('sourceopen', függvény () var sourceBuffer = this.addSourceBuffer (mime); var xhr = új XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' ; xhr.onload = függvény () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; 404 eset: dobja a 'Fájl nem található'; alapértelmezett: dobja 'Nem sikerült letölteni a file '; catch (e) console.error (e);; xhr.send ();); 7. lépés. Jelölje meg a patak végét
Amikor az API befejezte az adatok hozzáadását SourceBuffer egy esemény hívott updatend kirúgták. Egy eseménykezelő belsejében hívja a endOfStream () a metódusa MediaSource nak nek jelzi, hogy az adatfolyam véget ért.
mediaSource.addEventListener ('sourceopen', függvény () var sourceBuffer = this.addSourceBuffer (mime); var xhr = új XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'masybuffer' xhr.onload = függvény () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', funkció (_) mediaSource.endOfStream (); 404 eset: 'Fájl nem található' dobja; alapértelmezett: dobja a 'Nem sikerült letölteni a fájlt'; fogás (e) console.error (e);; xhr.send ();) ; 8. lépés. Csonkolja le a médiafájlt
A SourceBuffer objektum van két tulajdonság hívott appendWindowStart és appendWindowEnd a a médiaadatok kezdési és befejezési ideje szűrni szeretne. Az alább látható kiemelt kód szűri az első négy másodpercet az MP3.
mediaSource.addEventListener ('sourceopen', függvény () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demó
És ez minden, mi hangminta kerül lejátszásra közvetlenül a weboldalról. A forráskód, nézd meg Github repo és a végeredményért nézd meg a demóoldal.
Böngésző támogatás
Amint ezt a hozzászólást írta, a MediaSource Az API-t hivatalosan támogatják minden nagyobb böngészőben. De a tesztelés azt mutatja, hogy a a végrehajtás hibás a Firefoxban, és a Webkit böngészők még mindig bajban vannak a appendWindowStart ingatlan.
Mivel a MediaSource API még mindig a kísérleti szakaszban, a magasabb szerkesztési funkciókhoz való hozzáférés korlátozott lehet, de a alapvető streaming A funkció lehet valami használja azonnal.
