Come eseguire lo streaming audio troncato utilizzando l'API MediaSource

Con l' API MediaSource, è possibile generare e configurare flussi multimediali direttamente nel browser. Ti consente di eseguire una varietà di operazioni sui dati multimediali detenuti da tag HTML relativi ai media come

In questo post, vedremo in particolare come eseguire lo streaming di un campione audio (un file MP3 troncato) con l' API MediaSource direttamente nel browser per pre-mostrare la musica al tuo pubblico. Tratteremo come rilevare il supporto per l'API, come connettere l'elemento multimediale HTML all'API, come recuperare i file multimediali tramite Ajax e infine come eseguirne il flusso .

Se vuoi vedere in anticipo cosa stiamo facendo, dai un'occhiata al codice sorgente su Github, o dai un'occhiata alla pagina demo .

Passaggio 1. Creare l'HTML

Per creare l'HTML, aggiungi un

Passaggio 2. Rileva il supporto del browser

In JavaScript, crea un blocco try…catch che genera un errore se l' API MediaSource non è supportata dal browser dell'utente o, con altre parole, MediaSource (la chiave) non esiste nell'oggetto window .

 prova {if (! 'MediaSource' nella finestra) lanciare un nuovo ReferenceError ('Non c'è la proprietà MediaSource nell'oggetto window.')} catch (e) {console.log (e); } 

Passaggio 3. Rileva il supporto MIME

Dopo il controllo dell'assistenza, controlla anche il supporto del tipo MIME . Se il tipo MIME del supporto che vuoi trasmettere non è supportato dal browser, avvisa l'utente e genera un errore .

 var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) {alert ('Impossibile riprodurre il media. Il supporto di tipo MIME' + mime + 'non è supportato.'); throw ('Media di tipo' + mime + 'non è supportato.'); } 

Si noti che il frammento di codice sopra deve essere inserito nel blocco try, prima del blocco catch (per riferimento, seguire la numerazione delle righe o controllare il file JS finale su Github).

Passaggio 4. Collegare il

Creare un nuovo oggetto MediaSource e assegnarlo come origine del

 var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

Passaggio 5. Aggiungi un oggetto SourceBuffer a MediaSource

Quando un elemento multimediale HTML accede a un'origine multimediale ed è pronto per creare oggetti SourceBuffer, l'API MediaSource sourceopen un evento sourceopen .

L'oggetto SourceBuffer contiene una porzione di supporto che può essere decodificata, elaborata e riprodotta. Un singolo oggetto MediaSource può avere più oggetti SourceBuffer .

All'interno del gestore sourceopen dell'evento sourceopen, aggiungi un oggetto SourceBuffer a MediaSource con il metodo addSourceBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime);}); 

Passaggio 6. Scarica il supporto

Ora che hai un oggetto SourceBuffer, è tempo di recuperare il file MP3 . Nel nostro esempio, lo faremo utilizzando una richiesta AJAX .

Usa arraybuffer come responseType, che denota dati binari . Quando la risposta viene recuperata con successo, aggiungila a SourceBuffer con il metodo appendBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {caso 200: sourceBuffer.appendBuffer (this.response); break; caso 404: throw 'File Not Found'; default: throw 'Impossibile recuperare il file file ';}} catch (e) {console.error (e);}}; xhr.send ();}); 

Passaggio 7. Indicare la fine del flusso

Quando l'API ha terminato di aggiungere i dati a SourceBuffer viene SourceBuffer un evento chiamato updatend . All'interno di un gestore di eventi, chiamare il metodo endOfStream() di MediaSource per indicare che lo stream è terminato .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) {mediaSource.endOfStream ();} ); break; caso 404: lanciare 'File Not Found'; default: throw 'Impossibile recuperare il file';}} catch (e) {console.error (e);}}; xhr.send ();}) ; 

Passaggio 8. Tronca il file multimediale

L'oggetto SourceBuffer ha due proprietà denominate appendWindowStart e appendWindowEnd rappresentano l'ora di inizio e di fine dei dati multimediali che si desidera filtrare. Il codice evidenziato sotto filtra i primi quattro secondi del MP3.

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...}); 

dimostrazione

E questo è tutto, il nostro campione audio viene riprodotto direttamente dalla pagina web. Per il codice sorgente, dai un'occhiata al nostro repository Github e per il risultato finale, controlla la pagina demo .

Supporto per il browser

Al momento di scrivere questo post, l'API MediaSource è ufficialmente supportata in tutti i principali browser. Ma i test dimostrano che l' implementazione è bacata da Firefox ei browser Webkit presentano ancora problemi con la proprietà appendWindowStart .

Poiché l'API MediaSource è ancora nella sua fase sperimentale, l'accesso a funzioni di modifica più elevate potrebbe essere limitato, ma la funzionalità di base di streaming è qualcosa che puoi utilizzare subito .