Introduzione
Le Media Source Extensions (MSE) forniscono un controllo avanzato del buffering e della riproduzione per gli elementi <audio> e <video> HTML5. Sebbene siano stati originariamente sviluppati per semplificare i video player basati su Dynamic Adaptive Streaming over HTTP (DASH), di seguito vedremo come possono essere utilizzati per l'audio, in particolare per la riproduzione senza interruzioni.
Probabilmente hai ascoltato un album musicale in cui i brani si susseguivano senza interruzioni tra un canale e l'altro. Potresti anche averne uno in riproduzione in questo momento. Gli artisti creano queste esperienze di riproduzione senza interruzioni sia come scelta artistica sia come artefatto dei vinili e dei CD, in cui l'audio è stato scritto come uno stream continuo. Purtroppo, a causa del funzionamento dei moderni codec audio come MP3 e AAC, oggi questa esperienza uditiva senza interruzioni viene spesso persa.
Analizzeremo i dettagli del motivo di seguito, ma per il momento iniziamo con una dimostrazione. Di seguito sono riportati i primi 30 secondi dell'eccellente Sintel suddivisi in cinque file MP3 separati e riassemblati utilizzando MSE. Le linee rosse indicano gli spazi introdotti durante la creazione (codifica) di ogni MP3; in questi punti sentirai dei glitch.
Che schifo! Non è un'esperienza positiva, possiamo fare di meglio. Con un po' di impegno in più, utilizzando gli stessi file MP3 della demo sopra, possiamo utilizzare la MSE per rimuovere queste fastidiose interruzioni. Le linee verdi nella demo successiva indicano dove i file sono stati uniti e le lacune rimosse. Su Chrome 38 e versioni successive, la riproduzione avviene senza problemi.
Esistono diversi modi per creare contenuti senza interruzioni. Ai fini di questa demo, ci concentreremo sul tipo di file che un normale utente potrebbe avere a disposizione. Dove ogni file è stato codificato separatamente senza tenere conto dei segmenti audio precedenti o successivi.
Impostazione di base
Innanzitutto, torniamo indietro e copriamo la configurazione di base di un'istanza MediaSource. Come suggerisce il nome, le estensioni di origine media sono solo estensioni degli elementi multimediali esistenti. Di seguito, assegneremo un Object URL, che rappresenta la nostra istanza MediaSource, all'attributo source di un elemento audio, proprio come faresti con un URL standard.
var audio = document.createElement('audio');
var mediaSource = new MediaSource();
var SEGMENTS = 5;
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
function onAudioLoaded(data, index) {
// Append the ArrayBuffer data into our new SourceBuffer.
sourceBuffer.appendBuffer(data);
}
// Retrieve an audio segment via XHR. For simplicity, we're retrieving the
// entire segment at once, but we could also retrieve it in chunks and append
// each chunk separately. MSE will take care of assembling the pieces.
GET('sintel/sintel_0.mp3', function(data) { onAudioLoaded(data, 0); } );
});
audio.src = URL.createObjectURL(mediaSource);
Una volta connesso, l'oggetto MediaSource eseguirà alcune operazioni di inizializzazione e alla fine attiverà un evento sourceopen. A questo punto possiamo creare un SourceBuffer. Nell'esempio riportato sopra, ne stiamo creando uno di tipo audio/mpeg, in grado di analizzare e decodificare i segmenti MP3. Esistono diversi altri tipi disponibili.
Forme d'onda anomale
Torneremo al codice tra un attimo, ma ora esaminiamo più da vicino il file che abbiamo appena aggiunto, in particolare la parte finale. Di seguito è riportato un grafico degli ultimi 3000 campioni medi per entrambi i canali del canale sintel_0.mp3. Ogni pixel sulla linea rossa è un campione a virgola mobile nell'intervallo di [-1.0, 1.0].
Che cosa significano tutti questi campioni zero (silenziosi)? Sono in realtà dovuti ad artefatti di compressione introdotti durante la codifica. Quasi tutti gli encoder introducono un qualche tipo di spaziatura. In questo caso, LAME ha aggiunto esattamente 576 campioni di spaziatura alla fine del file.
Oltre al padding alla fine, a ogni file è stato aggiunto anche il padding all'inizio. Se diamo un'occhiata in avanti al canale sintel_1.mp3, vedremo che esistono altri 576 campioni di spaziatura all'inizio. La quantità di spaziatura varia in base all'encoder e ai contenuti, ma conosciamo i valori esatti in base a metadata incluso in ogni file.
Le sezioni di silenzio all'inizio e alla fine di ogni file causano i glitch tra i segmenti nella demo precedente. Per ottenere una riproduzione senza interruzioni, dobbiamo rimuovere queste sezioni di silenzio. Per fortuna, è facile farlo con MediaSource. Di seguito, modificheremo il metodo onAudioLoaded() per utilizzare una finestra di accodamento e un offset del timestamp per rimuovere questo silenzio.
Codice di esempio
function onAudioLoaded(data, index) {
// Parsing gapless metadata is unfortunately non trivial and a bit messy, so
// we'll glaze over it here; see the appendix for details.
// ParseGaplessData() will return a dictionary with two elements:
//
// audioDuration: Duration in seconds of all non-padding audio.
// frontPaddingDuration: Duration in seconds of the front padding.
//
var gaplessMetadata = ParseGaplessData(data);
// Each appended segment must be appended relative to the next. To avoid any
// overlaps, we'll use the end timestamp of the last append as the starting
// point for our next append or zero if we haven't appended anything yet.
var appendTime = index > 0 ? sourceBuffer.buffered.end(0) : 0;
// Simply put, an append window allows you to trim off audio (or video) frames
// which fall outside of a specified time range. Here, we'll use the end of
// our last append as the start of our append window and the end of the real
// audio data for this segment as the end of our append window.
sourceBuffer.appendWindowStart = appendTime;
sourceBuffer.appendWindowEnd = appendTime + gaplessMetadata.audioDuration;
// The timestampOffset field essentially tells MediaSource where in the media
// timeline the data given to appendBuffer() should be placed. I.e., if the
// timestampOffset is 1 second, the appended data will start 1 second into
// playback.
//
// MediaSource requires that the media timeline starts from time zero, so we
// need to ensure that the data left after filtering by the append window
// starts at time zero. We'll do this by shifting all of the padding we want
// to discard before our append time (and thus, before our append window).
sourceBuffer.timestampOffset =
appendTime - gaplessMetadata.frontPaddingDuration;
// When appendBuffer() completes, it will fire an updateend event signaling
// that it's okay to append another segment of media. Here, we'll chain the
// append for the next segment to the completion of our current append.
if (index == 0) {
sourceBuffer.addEventListener('updateend', function() {
if (++index < SEGMENTS) {
GET('sintel/sintel_' + index + '.mp3',
function(data) { onAudioLoaded(data, index); });
} else {
// We've loaded all available segments, so tell MediaSource there are no
// more buffers which will be appended.
mediaSource.endOfStream();
URL.revokeObjectURL(audio.src);
}
});
}
// appendBuffer() will now use the timestamp offset and append window settings
// to filter and timestamp the data we're appending.
//
// Note: While this demo uses very little memory, more complex use cases need
// to be careful about memory usage or garbage collection may remove ranges of
// media in unexpected places.
sourceBuffer.appendBuffer(data);
}
Una forma d'onda continua
Vediamo cosa ha fatto il nostro nuovo codice dando un'altra occhiata all'onda dopo aver applicato le finestre di accodamento. Di seguito puoi vedere che la sezione silenziosa alla fine di sintel_0.mp3 (in rosso) e la sezione silenziosa all'inizio di sintel_1.mp3 (in blu) sono state rimosse, lasciando una transizione senza interruzioni tra i segmenti.
Conclusione
In questo modo, abbiamo unito tutti e cinque i segmenti in uno solo e abbiamo raggiunto la fine della nostra demo. Prima di concludere, potresti aver notato che il nostro metodo onAudioLoaded() non tiene conto di contenitori o codec. Ciò significa che tutte queste tecniche funzioneranno indipendentemente dal tipo di contenitore o codec. Di seguito puoi riprodurre di nuovo il file MP4 frammentato compatibile con DASH della demo originale anziché l'MP3.
Per saperne di più, consulta le appendici di seguito per un approfondimento sulla creazione di contenuti senza interruzioni e sull'analisi dei metadati. Puoi anche visitare gapless.js per dare un'occhiata più da vicino al codice alla base di questa demo.
Grazie per l'attenzione.
Appendice A: creare contenuti senza interruzioni
Può essere difficile creare contenuti senza interruzioni. Di seguito illustreremo la creazione dei contenuti multimediali Sintel utilizzati in questa demo. Per iniziare, avrai bisogno di una copia della colonna sonora FLAC senza perdita di dati per Sintel. Per riferimento futuro, l'SHA1 è incluso di seguito. Per gli strumenti, avrai bisogno di FFmpeg, MP4Box, LAME e un'installazione di OSX con afconvert.
unzip Jan_Morgenstern-Sintel-FLAC.zip
sha1sum 1-Snow_Fight.flac
# 0535ca207ccba70d538f7324916a3f1a3d550194 1-Snow_Fight.flac
Per prima cosa, suddividiamo i primi 31,5 secondi della traccia 1-Snow_Fight.flac. Inoltre, vogliamo aggiungere un'attenuazione di 2,5 secondi a partire da 28 secondi per evitare clic al termine della riproduzione. Utilizzando la riga di comando FFmpeg riportata di seguito, possiamo eseguire tutte queste operazioni e inserire i risultati in sintel.flac.
ffmpeg -i 1-Snow_Fight.flac -t 31.5 -af "afade=t=out:st=28:d=2.5" sintel.flac
Successivamente, suddivideremo il file in 5 file wave di 6,5 secondi ciascuno.È più facile utilizzare il formato wave poiché quasi tutti i codificatori ne supportano l'importazione. Anche in questo caso, possiamo farlo con precisione con FFmpeg, dopodiché avremo: sintel_0.wav, sintel_1.wav, sintel_2.wav, sintel_3.wav e sintel_4.wav.
ffmpeg -i sintel.flac -acodec pcm_f32le -map 0 -f segment \
-segment_list out.list -segment_time 6.5 sintel_%d.wav
Ora creiamo i file MP3. LAME offre diverse opzioni per creare contenuti senza interruzioni. Se hai il controllo dei contenuti, ti consigliamo di utilizzare --nogap con una codifica batch di tutti i file per evitare completamente il riempimento tra i segmenti. Tuttavia, ai fini di questa demo, vogliamo che il padding sia presente, quindi utilizzeremo una codifica VBR standard di alta qualità dei file wave.
lame -V=2 sintel_0.wav sintel_0.mp3
lame -V=2 sintel_1.wav sintel_1.mp3
lame -V=2 sintel_2.wav sintel_2.mp3
lame -V=2 sintel_3.wav sintel_3.mp3
lame -V=2 sintel_4.wav sintel_4.mp3
Non serve altro per creare i file MP3. Ora vediamo come creare i file MP4 frammentati. Seguiremo le indicazioni di Apple per la creazione di contenuti multimediali masterizzati per iTunes. Di seguito, convertiremo i file wave in file CAF intermedi, come indicato nelle istruzioni, prima di codificarli come AAC in un contenitore MP4 utilizzando i parametri consigliati.
afconvert sintel_0.wav sintel_0_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_1.wav sintel_1_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_2.wav sintel_2_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_3.wav sintel_3_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_4.wav sintel_4_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_0_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_0.m4a
afconvert sintel_1_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_1.m4a
afconvert sintel_2_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_2.m4a
afconvert sintel_3_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_3.m4a
afconvert sintel_4_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_4.m4a
Ora abbiamo diversi file M4A che dobbiamo frammentare in modo appropriato prima che possano essere utilizzati con MediaSource. Ai fini del nostro esempio, utilizzeremo una dimensione del frammento di un secondo. MP4Box scriverà ogni MP4 frammentato come sintel_#_dashinit.mp4 insieme a un manifest MPEG-DASH (sintel_#_dash.mpd) che può essere ignorato.
MP4Box -dash 1000 sintel_0.m4a && mv sintel_0_dashinit.mp4 sintel_0.mp4
MP4Box -dash 1000 sintel_1.m4a && mv sintel_1_dashinit.mp4 sintel_1.mp4
MP4Box -dash 1000 sintel_2.m4a && mv sintel_2_dashinit.mp4 sintel_2.mp4
MP4Box -dash 1000 sintel_3.m4a && mv sintel_3_dashinit.mp4 sintel_3.mp4
MP4Box -dash 1000 sintel_4.m4a && mv sintel_4_dashinit.mp4 sintel_4.mp4
rm sintel_{0,1,2,3,4}_dash.mpd
È tutto. Ora abbiamo file MP4 e MP3 frammentati con i metadati corretti necessari per la riproduzione senza interruzioni. Per ulteriori dettagli su come sono strutturati i metadati, consulta l'appendice B.
Appendice B: analisi dei metadati senza interruzioni
Come per la creazione di contenuti senza interruzioni, l'analisi dei metadati senza interruzioni può essere complicata perché non esiste un metodo standard per l'archiviazione. Di seguito illustreremo in che modo i due codificatori più comuni, LAME e iTunes, memorizzano i metadati gapless. Iniziamo con la configurazione di alcuni metodi di assistenza e un riassunto per ParseGaplessData() utilizzato sopra.
// Since most MP3 encoders store the gapless metadata in binary, we'll need a
// method for turning bytes into integers. Note: This doesn't work for values
// larger than 2^30 since we'll overflow the signed integer type when shifting.
function ReadInt(buffer) {
var result = buffer.charCodeAt(0);
for (var i = 1; i < buffer.length; ++i) {
result <<../= 8;
result += buffer.charCodeAt(i);
}
return result;
}
function ParseGaplessData(arrayBuffer) {
// Gapless data is generally within the first 512 bytes, so limit parsing.
var byteStr = new TextDecoder().decode(arrayBuffer.slice(0, 512));
var frontPadding = 0, endPadding = 0, realSamples = 0;
// ... we'll fill this in as we go below.
Tratteremo innanzitutto il formato dei metadati di iTunes di Apple, poiché è il più semplice da analizzare e spiegare. All'interno dei file MP3 e M4A, iTunes (e afconvert) scrivono una breve sezione in ASCII come segue:
iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00
Viene scritto all'interno di un tag ID3 nel contenitore MP3 e in un atomo di metadati nel contenitore MP4. Per i nostri scopi, possiamo ignorare il primo token 0000000. I tre token successivi sono il padding iniziale, il padding finale e il conteggio totale dei campioni senza padding. Se dividiamo ciascuno di questi valori per la frequenza di campionamento dell'audio, otteniamo la durata di ciascuno.
// iTunes encodes the gapless data as hex strings like so:
//
// 'iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00'
// 'iTunSMPB[ 26 bytes ]####### frontpad endpad real samples'
//
// The approach here elides the complexity of actually parsing MP4 atoms. It
// may not work for all files without some tweaks.
var iTunesDataIndex = byteStr.indexOf('iTunSMPB');
if (iTunesDataIndex != -1) {
var frontPaddingIndex = iTunesDataIndex + 34;
frontPadding = parseInt(byteStr.substr(frontPaddingIndex, 8), 16);
var endPaddingIndex = frontPaddingIndex + 9;
endPadding = parseInt(byteStr.substr(endPaddingIndex, 8), 16);
var sampleCountIndex = endPaddingIndex + 9;
realSamples = parseInt(byteStr.substr(sampleCountIndex, 16), 16);
}
D'altra parte, la maggior parte degli encoder MP3 open source memorizza i metadati senza interruzioni in un'intestazione Xing speciale inserita in un frame MPEG silenzioso (è silenzioso in modo che i decodificatori che non comprendono l'intestazione Xing riproducano semplicemente il silenzio). Purtroppo questo tag non è sempre presente e contiene una serie di campi facoltativi. Ai fini di questa demo, abbiamo il controllo sui contenuti multimediali, ma in pratica saranno necessari alcuni controlli aggiuntivi per sapere quando i metadati senza interruzioni sono effettivamente disponibili.
Innanzitutto analizzeremo il conteggio totale dei campioni. Per semplicità, lo leggeremo dall'intestazione Xing, ma potrebbe essere costruito dalla normale intestazione audio MPEG. Le intestazioni Xing possono essere contrassegnate da un tag Xing o Info. Esattamente 4 byte dopo questo tag ci sono 32 bit che rappresentano il numero totale di frame nel file; moltiplicando questo valore per il numero di campioni per frame, otterremo il numero totale di campioni nel file.
// Xing padding is encoded as 24bits within the header. Note: This code will
// only work for Layer3 Version 1 and Layer2 MP3 files with XING frame counts
// and gapless information. See the following document for more details:
// http://www.codeproject.com/Articles/8295/MPEG-Audio-Frame-Header
var xingDataIndex = byteStr.indexOf('Xing');
if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Info');
if (xingDataIndex != -1) {
// See section 2.3.1 in the link above for the specifics on parsing the Xing
// frame count.
var frameCountIndex = xingDataIndex + 8;
var frameCount = ReadInt(byteStr.substr(frameCountIndex, 4));
// For Layer3 Version 1 and Layer2 there are 1152 samples per frame. See
// section 2.1.5 in the link above for more details.
var paddedSamples = frameCount * 1152;
// ... we'll cover this below.
Ora che abbiamo il numero totale di campioni, possiamo passare alla lettura del numero di campioni di riempimento. A seconda del codificatore, questo potrebbe essere scritto sotto un tag LAME o Lavf nidificato nell'intestazione Xing. Esattamente 17 byte dopo questa intestazione ci sono 3 byte che rappresentano il padding iniziale e finale di 12 bit ciascuno.
xingDataIndex = byteStr.indexOf('LAME');
if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Lavf');
if (xingDataIndex != -1) {
// See http://gabriel.mp3-tech.org/mp3infotag.html#delays for details of
// how this information is encoded and parsed.
var gaplessDataIndex = xingDataIndex + 21;
var gaplessBits = ReadInt(byteStr.substr(gaplessDataIndex, 3));
// Upper 12 bits are the front padding, lower are the end padding.
frontPadding = gaplessBits >> 12;
endPadding = gaplessBits & 0xFFF;
}
realSamples = paddedSamples - (frontPadding + endPadding);
}
return {
audioDuration: realSamples * SECONDS_PER_SAMPLE,
frontPaddingDuration: frontPadding * SECONDS_PER_SAMPLE
};
}
In questo modo abbiamo una funzione completa per l'analisi della maggior parte dei contenuti senza interruzioni. Tuttavia, i casi limite sono numerosi, quindi ti consigliamo di procedere con cautela prima di utilizzare codice simile in produzione.
Appendice C: sulla raccolta dei rifiuti
La memoria appartenente alle istanze SourceBuffer viene raccolta inutilizzata in base al tipo di contenuti, ai limiti specifici della piattaforma e alla posizione di riproduzione corrente. In Chrome, la memoria verrà recuperata innanzitutto dai buffer già riprodotti. Tuttavia, se l'utilizzo della memoria supera i limiti specifici della piattaforma, la memoria verrà rimossa dai buffer non riprodotti.
Quando la riproduzione raggiunge un intervallo nella sequenza temporale a causa della memoria recuperata, potrebbe verificarsi un errore se l'intervallo è abbastanza piccolo o l'arresto completo se l'intervallo è troppo grande. Né è un'esperienza utente ottimale, quindi è importante evitare di aggiungere troppi dati contemporaneamente e rimuovere manualmente dalla sequenza temporale dei contenuti multimediali gli intervalli non più necessari.
Gli intervalli possono essere rimossi tramite il metodo remove() su ogni SourceBuffer, che accetta un intervallo [start, end] in secondi. Come per appendBuffer(), ogni remove() attiverà un evento updateend al termine. Altre rimozioni o aggiunte non devono essere eseguite finché non viene attivato l'evento.
Su Chrome per computer, puoi mantenere in memoria contemporaneamente circa 12 megabyte di contenuti audio e 150 megabyte di contenuti video. Non devi fare affidamento su questi valori su browser o piattaforme; ad esempio, non sono certamente rappresentativi dei dispositivi mobili.
Il garbage collection influisce solo sui dati aggiunti a SourceBuffers; non ci sono limiti alla quantità di dati che puoi mantenere in buffer nelle variabili JavaScript. Se necessario, puoi anche ricollegare gli stessi dati nella stessa posizione.