Come eseguire lo streaming audio troncato utilizzando l'API MediaSource
Con il API MediaSource, Puoi generare e configurare flussi multimediali proprio nel browser. Ti permette di eseguire una varietà di operazioni sui dati multimediali tenuto da tag HTML relativi ai media come o . Ad esempio, puoi mescolare flussi diversi, creare media sovrapposti, mezzi di caricamento pigri, e modifica le metriche dei media come cambiare il volume o la frequenza.
In questo post, vedremo in particolare come riprodurre un campione audio (un file MP3 troncato) con il API MediaSource direttamente nel browser per musica pre-spettacolo al tuo pubblico. Tratteremo come rilevare il supporto per l'API, come collegare l'elemento multimediale HTML all'API, come prendi i media via Ajax e infine come Streaming.
Se vuoi vedere in anticipo cosa stiamo facendo, dai un'occhiata al codice sorgente su Github, o controllare il pagina demo.
Passaggio 1. Creare l'HTML
Per creare l'HTML, aggiungi un tag con a controlli attributo alla tua pagina. Per compatibilità con le versioni precedenti, anche aggiungi un messaggio di errore predefinito per gli utenti i cui browser non supportano la funzionalità. Useremo JavaScript per attivare / disattivare questo messaggio.
Passaggio 2. Rileva il supporto del browser
In JavaScript, crea un prova a prendere blocco che lo farà lanciare un errore se la L'API MediaSource non è supportata dal browser dell'utente o, con altre parole se MediaSource (il tasto) non esiste nel finestra oggetto.
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 per supporto del tipo MIME. Se il tipo MIME del supporto che si desidera trasmettere non è supportato dal browser, avvisare l'utente e lanciare 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 posto all'interno del provare bloccare, prima di catturare block (per riferimento, segui la numerazione delle righe o controlla il file JS finale su Github).
Passaggio 4. Collegare il
Crea un nuovo MediaSource oggetto, e assegnalo come fonte del etichetta usando il URL.createObjectURL () metodo.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Passaggio 5. Aggiungere a SourceBuffer oggetto a MediaSource
Quando un elemento multimediale HTML accede a una fonte multimediale ed è pronto a creare SourceBuffer oggetti, l'API MediaSource spara a sourceopen evento .
Il SourceBuffer oggetto tiene un pezzo di media che alla fine viene decodificato, elaborato e riprodotto. Una sola MediaSource oggetto può avere più SourceBuffer oggetti.
Dentro il gestore di eventi del sourceopen evento, aggiungere un SourceBuffer oggetto a MediaSource con il addSourceBuffer () metodo.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Passaggio 6. Scarica il supporto
Ora che hai un SourceBuffer oggetto, è tempo di prendi il file MP3. Nel nostro esempio, lo faremo da utilizzando una richiesta AJAX.
Uso ArrayBuffer come responseType, quale denota dati binari. Quando la risposta è stata recuperata con successo, aggiungilo a SourceBuffer con il appendBuffer () metodo.
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 un evento chiamato updatend è licenziato. All'interno di un gestore di eventi, chiama il fine del flusso() metodo di MediaSource a indica 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
Il SourceBuffer l'oggetto ha due proprietà chiamato appendWindowStart e appendWindowEnd che rappresenta il ora di inizio e fine dei dati multimediali vuoi filtrare. Il codice evidenziato qui 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 è in streaming direttamente dalla pagina web. Per il codice sorgente, dai un'occhiata al nostro Github repo e per il risultato finale, controlla il pagina demo.
Supporto per il browser
Al momento di scrivere questo post, il MediaSource API è ufficialmente supportata in tutti i principali browser. Ma i test dimostrano che il l'implementazione è bacata in Firefox, e i browser Webkit hanno ancora problemi con il appendWindowStart proprietà.
Come è l'API MediaSource ancora nella sua fase sperimentale, l'accesso a funzioni di modifica più alte può essere limitato ma il streaming di base caratteristica è qualcosa che puoi fare uso di subito.
