Jak streamovat zkrácené audio pomocí MediaSource API
S MediaSource API, můžeš generovat a konfigurovat datové toky médií přímo v prohlížeči. To vám umožní provádět různá operace s daty médií uchovávané v HTML tagech, jako jsou např nebo . Můžete například mix různých proudů, vytvářet překrývající se média, jenivé zaváděcí médium, a upravit metriky médií např. změna hlasitosti nebo frekvence.
V tomto příspěvku konkrétně uvidíme streamovat audio vzorek (zkrácený soubor MP3) pomocí MediaSource API přímo v prohlížeči Pre-show hudba pro vaše publikum. Budeme se zabývat tím, jak detekovat podporu API, jak připojte prvek média HTML rozhraní API přinese média přes Ajax a nakonec jak proud.
Pokud chcete vidět předem, co máme, podívejte se na zdrojový kód na Github, nebo se podívejte na demo stránka.
Krok 1. Vytvořte HTML
Chcete-li vytvořit HTML, přidejte tag se znakem řízení atribut na vaši stránku. Pro zpětnou kompatibilitu také přidat výchozí chybovou zprávu pro uživatele, jejichž prohlížeče tuto funkci nepodporují. Zapneme / vypneme tuto zprávu pomocí JavaScriptu.
Krok 2. Zjistěte podporu prohlížeče
V JavaScriptu vytvořte Zkus chytit blok, který bude chyba pokud MediaSource API není podporováno prohlížečem uživatele, nebo jinými slovy, pokud MediaSource (klíč) neexistuje v okno objekt.
try if (! 'MediaSource' v okně) vyvolá nový ReferenceError ('V objektu okna není žádná vlastnost MediaSource' ') catch (e) console.log (e); Krok 3. Zjistěte podporu MIME
Po kontrole podpory zkontrolujte také podporu typu MIME. Pokud prohlížeč nepodporuje typ MIME média, které chcete streamovat, upozornit uživatele a chyba.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Nelze přehrát média. Média typu MIME' + mime + 'není podporována.'); throw ('Média typu' + mime + 'není podporována.'); Všimněte si, že výše uvedený fragment kódu musí být umístěna uvnitř Snaž se blok, před úlovek blok (pro orientaci následujte číslování řádků nebo se podívejte na poslední soubor JS na Githubu).
Krok 4. Spojte
Vytvoř nový MediaSource objekt a přiřadit jej jako zdroj štítek pomocí URL.createObjectURL () metoda.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Krok 5. Přidání a SourceBuffer proti MediaSource
Je-li prvek média HTML přistupuje ke zdroji médií a je připraven vytvořit SourceBuffer objekty, rozhraní API aplikace MediaSource požáry a sourceopen událost .
SourceBuffer objekt drží kus médií který je nakonec dekódován, zpracován a přehrán. Jediný MediaSource objekt může mají více SourceBuffer objekty.
Uvnitř obsluha události sourceopen událost, přidat SourceBuffer proti MediaSource s addSourceBuffer () metoda.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Krok 6. Načtěte médium
Teď, když máte SourceBuffer je čas načíst soubor MP3. V našem příkladu to uděláme pomocí požadavku AJAX.
Použití arraybuffer tak jako responseType, který označuje binární data. Po úspěšném vyvolání odpovědi, připojte ji SourceBuffer s appendBuffer () metoda.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nový XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) případ 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'Soubor nebyl nalezen'; default: throw 'Selhalo načtení file '; catch (e) console.error (e);; xhr.send ();); Krok 7. Uveďte konec proudu
Když rozhraní API dokončilo připojování dat SourceBuffer a událost updatend je vypálena. Uvnitř obsluhy události zavolejte na konec přenosu() metoda MediaSource na znamená, že proud skončil.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nový XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) případ 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', funkce (_) mediaSource.endOfStream (); ); break; case 404: throw 'File Not Found'; default: throw 'Nepodařilo se načíst soubor'; catch (e) console.error (e);; xhr.send ();) ; Krok 8. Ořízněte mediální soubor
SourceBuffer objekt má dvě vlastnosti volal appendWindowStart a appendWindowEnd představující čas začátku a konce dat médií chcete filtrovat. Níže uvedený zvýrazněný kód filtruje první čtyři sekundy MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demo
A to je vše, naše audio vzorek je streamován přímo z webové stránky. Pro zdrojový kód, podívejte se na naše Github repo a pro konečný výsledek, podívejte se na demo stránka.
Podpora prohlížeče
Jak psát tento příspěvek, MediaSource API je oficiálně podporováno ve všech hlavních prohlížečích. Ale testy ukazují, že implementace je buggy ve Firefoxu, a prohlížeče Webkit mají stále problémy s appendWindowStart vlastnictví.
Jako rozhraní MediaSource API stále ve své experimentální fázi, přístup k vyšším editačním funkcím může být omezen základní streamování funkce je něco, co můžete využijte ihned.
