Ako používať streamované audio pomocou MediaSource API
S MediaSource API, môžeš generovať a konfigurovať toky médií priamo v prehliadači. Umožňuje to vykonávať rôzne operácie s dátami médií držané pomocou značiek HTML súvisiacich s médiami, ako napríklad alebo . Napríklad, môžete mix rôznych prúdov, vytváranie prekrývajúcich sa médií, lenivé nosiče, a upraviť metriky médií ako napríklad zmena hlasitosti alebo hlasitosti.
V tomto príspevku sa budeme konkrétne venovať stream audio zvukovej vzorky (skrátený súbor MP3) s MediaSource API priamo v prehliadači, aby sa pre-show hudby k svojmu publiku. Budeme sa zaoberať tým, ako zistiť podporu rozhrania API, ako pripojte prvok HTML k API, ako to načítajte médium cez Ajax, a nakoniec ako prúd to.
Ak chcete vopred vidieť, čo máme, pozrite sa na zdrojový kód na Github, alebo si pozrite demo stránka.
Krok 1. Vytvorte HTML
Ak chcete vytvoriť kód HTML, pridajte ho značku s riadenie atribút na vašu stránku. Pre spätnú kompatibilitu tiež pridajte predvolenú chybovú správu pre používateľov, ktorých prehliadače túto funkciu nepodporujú. Na zapnutie / vypnutie tejto správy budeme používať jazyk JavaScript.
Krok 2. Zistite podporu prehliadača
V systéme JavaScript vytvorte Skús chytiť blok, ktorý bude hádzať chybu ak Aplikácia MediaSource API nie je podporovaná prehliadačom používateľa, alebo inými slovami, ak MediaSource (kľúč) neexistuje v okno objekt.
skúste if (! 'MediaSource' v okne) hádzať nové ReferenceError ('V okne objektu nie je žiadna vlastnosť MediaSource.') catch (e) console.log (e); Krok 3. Zistite podporu MIME
Po kontrole podpory tiež skontrolujte podpora typu MIME. Ak prehliadač nepodporuje typ média MIME, ktorý chcete streamovať, nie je podporovaný, upozorniť používateľa a hádzať chybu.
var mime = 'audio / mpeg'; ak (! MediaSource.isTypeSupported (mime)) alert ('Nie je možné prehrávať médium. Médium typu MIME' + mime + 'nie je podporované.'); throw ('Médium typu' + mime + 'nie je podporované.'); Upozorňujeme, že fragment kódu musí byť uvedený vyššie umiestnené vo vnútri vyskúšať blok, pred úlovok blok (pre referenciu, postupujte podľa číslovania riadkov alebo skontrolujte konečný súbor JS na Github).
Krok 4. Prepojte
Vytvorte nový MediaSource objekt, a priraďte ho ako zdroj štítok pomocou URL.createObjectURL () metóda.
var audio = document.querySelector ('audio'), mediaSource = nový MediaSource (); audio.src = URL.createObjectURL (mediaSource); Krok 5. Pridajte SourceBuffer namietať proti MediaSource
Pri prvku HTML prístup k mediálnemu zdroju a je pripravený na vytvoriť SourceBuffer objektov, MediaSource API požiare a sourceopen udalosť .
SourceBuffer objekt drží časť média ktorý je nakoniec dekódovaný, spracovaný a prehrávaný. Slobodný MediaSource objekt môže mať viacnásobné SourceBuffer objektov.
Vnútri obsluha udalosti sourceopen udalosť, pridaj SourceBuffer namietať proti MediaSource s addSourceBuffer () metóda.
mediaSource.addEventListener ('sourceopen', funkcia () var sourceBuffer = this.addSourceBuffer (mime);); Krok 6. Načítajte médium
Teraz, keď máte SourceBuffer objekt, je čas na načítať súbor MP3. V našom príklade to urobíme pomocou žiadosti AJAX.
použitie arraybuffer ako responseType, ktorý označuje binárne údaje. Keď je odpoveď úspešne načítaná, pridajte ho SourceBuffer s appendBuffer () metóda.
mediaSource.addEventListener ('sourceopen', function () var zdrojBuffer = this.addSourceBuffer (mime); var xhr = nový XMLHttpRequest; xhr.open ('GET ','ample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; prípad 404: throw 'File Not Found'; súbor '; úlovok (e) console.error (e);; xhr.send ();); Krok 7. Uveďte koniec prúdu
Keď aplikácia API dokončí priradenie údajov SourceBuffer udalosť nazývaná updatend je vypálená. V rámci obsluhy udalostí zavolajte koniec streamu() metóda MediaSource na naznačujú, že prúd skončil.
mediaSource.addEventListener ('sourceopen', function () var zdrojBuffer = this.addSourceBuffer (mime); var xhr = nový XMLHttpRequest; xhr.open ('GET ','ample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = funkcia () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream ), pauza, prípad 404: hádzať 'Súbor nebol nájdený', predvolené: hodiť 'Nepodarilo sa načítať súbor'; catch (e) console.error (e);; ; Krok 8. Zrezanie mediálneho súboru
SourceBuffer objekt má dve vlastnosti volal appendWindowStart a appendWindowEnd zastupujúci čas začiatku a konca dátových médií ktoré chcete filtrovať. Zvýraznený kód uvedený nižšie filtruje prvé štyri sekundy MP3.
mediaSource.addEventListener ('sourceopen', funkcia () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...); demonštrácie
A to je všetko naše zvuková vzorka je streamovaná priamo z webovej stránky. Pre zdrojový kód, pozrite sa na našu Github repo a konečný výsledok skontrolujte demo stránka.
Podpora prehliadača
Od písania tohto príspevku MediaSource API je oficiálne podporované vo všetkých hlavných prehliadačoch. Ale testovanie ukazuje, že implementácia je buggy vo Firefoxe, a prehliadače Webkit majú stále problémy appendWindowStart vlastnosť.
Ako rozhranie API MediaSource je stále vo svojej experimentálnej fáze, prístup k vyšším funkciám úprav môže byť obmedzený, ale základné streamovanie funkcia je niečo, čo môžete okamžite využite.
