Cum se streaming audio redus folosind API MediaSource
Cu API pentru MediaSource, poti generează și configurează fluxurile media chiar în browser. Vă permite să efectuați o varietate de operații privind datele media deținute de etichetele HTML legate de medii, cum ar fi sau . De exemplu, puteți amestecați diferite fluxuri, creați suporturi suprapuse, mediu de încărcare leneș, și editați valorile media cum ar fi modificarea volumului sau a frecvenței.
În acest post, vom vedea în mod specific cum să transmiteți o probă audio (un fișier MP3 trunchiat) cu API pentru MediaSource chiar în browser pentru a muzică pre-spectacol pentru publicul dvs. Vom acoperi cum să facem asta detectarea suportului pentru API, cum să conectați elementul media HTML la API, cum să preluați mass-media prin Ajax, și în cele din urmă cum să faceti-l.
Dacă doriți să vedeți în avans ceea ce facem, aruncați o privire la cod sursă pe Github, sau verificați pagina demo.
Pasul 1. Creați codul HTML
Pentru a crea HTML, adăugați un eticheta cu controale atribut la pagina ta. Pentru compatibilitate înapoi, de asemenea adăugați un mesaj de eroare implicit pentru utilizatorii ale căror browsere nu acceptă această caracteristică. Vom folosi JavaScript pentru a activa / dezactiva acest mesaj.
Pasul 2. Detectați suportul browserului
În JavaScript, creați un încearcă să prinzi bloc care va arunca o eroare dacă API-ul MediaSource nu este acceptat de către browser-ul utilizatorului sau, cu alte cuvinte, dacă MediaSource (cheia) nu exista în fereastră obiect.
încercați if (! 'MediaSource' în fereastră) arunca o nouă Referință ('Nu există nici o proprietate MediaSource în obiect fereastră') catch (e) console.log (e); Pasul 3. Detectați suportul MIME
După verificarea de susținere, verificați și suportul tipului MIME. Dacă tipul de suport MIME pe care doriți să îl transmiteți în flux nu este acceptat de browser, alertați utilizatorul și arunca o eroare.
var mime = 'audio / mpeg'; dacă (! MediaSource.isTypeSupported (mime)) alert ('Nu se poate reda media. Media tipului MIME' + mime + 'nu este acceptată.'); aruncare ("Media tipului" + mime + "nu este acceptată. '); Rețineți că fragmentul de cod de mai sus trebuie să fie plasat în interiorul încerca bloc, inainte de captură bloc (pentru referință, urmați numerotarea liniilor sau verificați fișierul JS final pe Github).
Pasul 4. Conectați
Creaza un nou MediaSource obiect și îl atribuie drept sursă etichetă folosind URL.createObjectURL () metodă.
var audio = Document.querySelector ('audio'), mediaSource = MediaSource nou (); audio.src = URL.createObjectURL (mediaSource); Pasul 5. Adăugați a SourceBuffer obiect pentru MediaSource
Atunci când un element media HTML accesează o sursă media și este gata să crea SourceBuffer obiecte, API-ul MediaSource incendii a sourceopen eveniment .
SourceBuffer obiect deține o bucată de mass-media care este eventual decodificat, procesat și jucat. Un singur MediaSource obiect poate au multiple SourceBuffer obiecte.
În interiorul gestionarea evenimentului sourceopen eveniment, adauga o SourceBuffer obiect pentru MediaSource cu addSourceBuffer () metodă.
mediaSource.addEventListener ('sourceopen', funcția () var sourceBuffer = this.addSourceBuffer (mime);); Pasul 6. Încărcați suportul media
Acum, că aveți un a SourceBuffer obiect, este timpul să preluați fișierul MP3. În exemplul nostru, vom face acest lucru folosind o solicitare AJAX.
Utilizare arraybuffer la fel de responseType, care înseamnă date binare. Când răspunsul este preluat cu succes, adaugă-l la SourceBuffer cu appendBuffer () metodă.
mediaSource.addEventListener ('sourceopen', funcție () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nou XMLHttpRequest; xhr.open ('GET ','ample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try comutare (this.status) caz 200: sursaBuffer.appendBuffer (this.response); pauza; caz 404: aruncare 'File Not Found'; fișier "; captură (e) console.error (e);; xhr.send ();); Pasul 7. Indicați sfârșitul fluxului
Când API-ul a terminat să adauge datele SourceBuffer un eveniment numit updatend este concediat. În interiorul unui handler de evenimente, apelați sfarsitul transmisiunii() Metodă de MediaSource la indică faptul că fluxul sa încheiat.
mediaSource.addEventListener ('sourceopen', funcție () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nou XMLHttpRequest; xhr.open ('GET ','ample.mp3'); xhr.responseType = 'arraybuffer' ; ); caz 404: aruncați "Fișierul nu a fost găsit"; implicit: arunca "Nu a reușit să preluați fișierul"; captură (e) console.error (e) ; Pasul 8. Trageți fișierul media
SourceBuffer obiect are două proprietăți denumit appendWindowStart și appendWindowEnd reprezentând începutul și sfârșitul timpului datelor media pe care doriți să le filtrați. Codul evidențiat mai jos filtrează primele patru secunde de pe MP3.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mim); sourceBuffer.appendWindowEnd = 4,0; ...);
Demo
Și asta e tot proiecția audio este transmisă în flux chiar de pe pagina web. Pentru cod sursa, să ne uităm la noi Github repo iar pentru rezultatul final, verificați pagina demo.
Suport pentru browser
De la scris acest post, MediaSource API este acceptat oficial în toate browserele importante. Dar testarea arată că implementarea este buggy în Firefox, și browserele Webkit au încă probleme cu appendWindowStart proprietate.
Ca API MediaSource încă în stadiul experimental, accesul la funcții de editare superioare poate fi limitat, dar de streaming de bază caracteristica este ceva ce puteți utilizați imediat.
