Introduzione
Le Media Source Extensions (MSE) offrono un controllo di riproduzione e buffering esteso per gli elementi <audio> e <video> HTML5. Sebbene siano stati sviluppati in origine per facilitare i video player basati sullo strumento Dynamic Adaptive Streaming over HTTP (DASH), di seguito è spiegato come utilizzarli per l'audio. in particolare per la riproduzione senza interruzioni.
Probabilmente hai ascoltato un album musicale in cui le canzoni si diffondevano senza interruzioni. potresti persino ascoltarne uno in questo momento. Gli artisti creano queste esperienze di riproduzione senza interruzioni sia come scelta artistica sia come artefatto di dischi in vinile e CD in cui l'audio viene scritto come un unico flusso continuo. Purtroppo, a causa del funzionamento dei codec audio moderni come MP3 e AAC, questa fluida esperienza sonora spesso si perde oggi.
Vedremo i motivi in modo dettagliato, ma per il momento iniziamo con una dimostrazione. Di seguito sono riportati i primi trenta secondi dell'ottimo Sintel, estratti in cinque file MP3 separati e riassemblati utilizzando MSE. Le linee rosse indicano degli spazi vuoti introdotti durante la creazione (codifica) di ogni MP3; sentirai degli errori in questi punti.
Wow! Non è un'esperienza positiva; possiamo fare meglio. Con un po' più di lavoro, usando esattamente gli stessi file MP3 nella demo precedente, possiamo usare MSE per rimuovere queste fastidiose lacune. Le linee verdi nella demo successiva indicano i punti in cui i file sono stati uniti e gli spazi vuoti rimossi. Su Chrome 38 e versioni successive, i contenuti verranno riprodotti senza interruzioni.
Esistono diversi modi per creare contenuti senza interruzioni. Nell'ambito di questa demo, ci concentreremo sul tipo di file che un normale utente potrebbe avere. Indica quando ogni file è stato codificato separatamente senza tenere conto dei segmenti audio precedenti o successivi.
Impostazione di base
Per prima cosa, torniamo alla configurazione di base di un'istanza MediaSource. Media Source Extensions, come suggerisce il nome, sono solo estensioni agli elementi multimediali esistenti. Di seguito assegniamo 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à un'inizializzazione e, alla fine, attiverà un evento sourceopen; A questo punto possiamo creare una SourceBuffer. Nell'esempio riportato sopra, ne creiamo uno audio/mpeg, che è in grado di analizzare e decodificare i nostri segmenti MP3; sono disponibili vari altri tipi.
Forme d'onda anomale
Torneremo sul codice tra poco, ma ora esaminiamo più da vicino il file che abbiamo appena aggiunto, precisamente alla fine. Di seguito è riportato un grafico degli ultimi 3000 campioni calcolati in media su entrambi i canali dalla traccia sintel_0.mp3. Ogni pixel sulla linea rossa è un esempio a virgola mobile nell'intervallo [-1.0, 1.0].
E tutti quei campioni zero (silenziosi)? In realtà sono dovuti agli artefatto di compressione introdotti durante la codifica. Quasi tutti i codificatori introducono un tipo di spaziatura interna. In questo caso LAME ha aggiunto esattamente 576 campioni di spaziatura interna alla fine del file.
Oltre alla spaziatura interna alla fine, in ogni file è stata aggiunta anche una spaziatura interna all'inizio. Se diamo uno sguardo più avanti alla traccia sintel_1.mp3, vedremo altri 576 esempi di spaziatura interna nella parte anteriore. La quantità di spaziatura interna varia a seconda del codificatore e dei 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 sono la causa di glitch tra i segmenti nella demo precedente. Per ottenere una riproduzione senza interruzioni, dobbiamo rimuovere queste sezioni di silenzio. Fortunatamente, puoi farlo facilmente con MediaSource. Di seguito modificheremo il metodo onAudioLoaded() in modo da utilizzare una finestra di aggiunta e un offset 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 senza interruzioni
Vediamo quali risultati ha ottenuto il nostro nuovissimo codice osservando ancora una volta la forma d'onda dopo l'applicazione delle finestre di aggiunta. Di seguito puoi notare 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. in modo da ottenere una transizione fluida tra i segmenti.
Conclusione
Abbiamo quindi unito tutti e cinque i segmenti in uno solo e siamo arrivati alla fine della demo. Prima di andare, avrai notato che il nostro metodo onAudioLoaded() non prende in considerazione container o codec. Ciò significa che tutte queste tecniche funzioneranno indipendentemente dal tipo di container o codec. Di seguito puoi guardare di seguito la demo originale MP4 frammentata compatibile con DASH anziché MP3.
Se vuoi saperne di più, leggi le appendici di seguito per maggiori dettagli sulla creazione di contenuti senza interruzioni e sull'analisi dei metadati. Puoi anche esplorare gapless.js per esaminare più da vicino il codice alla base di questa demo.
Grazie per l'attenzione.
Appendice A: Creazione di contenuti senza spazi vuoti
Creare contenuti senza spazi vuoti può essere difficile da ottenere. Di seguito illustreremo la creazione dei contenuti multimediali Sintel utilizzati in questa demo. Per iniziare ti serve una copia della colonna sonora di file FLAC senza perdita di Sintel. per i posteri, il valore SHA1 è incluso di seguito. Per gli strumenti sono necessari FFmpeg, MP4Box, LAME e un'installazione OSX con afconvert.
unzip Jan_Morgenstern-Sintel-FLAC.zip
sha1sum 1-Snow_Fight.flac
# 0535ca207ccba70d538f7324916a3f1a3d550194 1-Snow_Fight.flac
Per prima cosa, dividiamo i primi 31,5 secondi la traccia 1-Snow_Fight.flac. Vogliamo anche aggiungere una dissolvenza in uscita di 2,5 secondi a partire da 28 secondi in entrata per evitare clic al termine della riproduzione. Utilizzando la riga di comando FFmpeg riportata di seguito, possiamo fare tutto questo 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
Quindi, suddivideremo il file in 5 file wave di 6,5 secondi ciascuno; è più facile usare wave, dato che quasi tutti i codificatori ne supportano l'importazione. Anche in questo caso, possiamo farlo esattamente 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 ha diverse opzioni per la creazione di contenuti senza interruzioni. Se hai il controllo dei contenuti, potresti considerare l'utilizzo di --nogap con una codifica batch di tutti i file per evitare del tutto la spaziatura interna tra i segmenti. Ai fini di questa demo, però, vogliamo che la spaziatura interna sia utile per la spaziatura interna, quindi utilizzeremo una codifica VBR standard di alta qualità per i 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
È tutto ciò che serve per creare i file MP3. Ora vediamo la creazione dei file MP4 frammentati. Seguiremo le istruzioni di Apple per la creazione di contenuti multimediali masterizzati per iTunes. Di seguito, convertiremo i file wave in file CAF intermedi, in base alle istruzioni, prima di codificarli come AAC in un container 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 di poter essere utilizzati con MediaSource. Ai nostri scopi, utilizzeremo una dimensione del frammento di un secondo. MP4Box scriverà ogni MP4 frammentato come sintel_#_dashinit.mp4 insieme a un file 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. Consulta l'Appendice B per maggiori dettagli su come appaiono i metadati.
Appendice B: analisi dei metadati senza spazi
Proprio come per la creazione di contenuti gapless, l'analisi dei metadati gapless può essere complicata in quanto non esiste un metodo standard per l'archiviazione. Di seguito vedremo in che modo i due codificatori più comuni, LAME e iTunes, memorizzano i metadati senza spazi vuoti. Per iniziare, configura alcuni metodi di supporto e una struttura per i ParseGaplessData() utilizzati 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.
Parleremo per prima cosa del formato dei metadati di iTunes di Apple, in quanto è il più facile da analizzare e spiegare. All'interno dei file MP3 e M4A, iTunes (e afconvert) scrivi una breve sezione in ASCII in questo modo:
iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00
È scritto all'interno di un tag ID3 all'interno del container MP3 e all'interno di un atom di metadati all'interno del contenitore MP4. Per i nostri scopi, possiamo ignorare il primo token 0000000. I tre token successivi sono la spaziatura interna anteriore, la spaziatura interna finale e il numero totale di campioni senza spaziatura interna. Dividendo ciascuno di questi valori per la frequenza di campionamento dell'audio si ottiene 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 dei codificatori MP3 open source archivierà i metadati gapless all'interno di una speciale intestazione Xing posizionata all'interno di un frame MPEG silenzioso (è silenzioso, quindi i decoder che non comprendono l'intestazione Xing riprodurranno semplicemente silenzio). Purtroppo questo tag non è sempre presente e ha 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 gapless sono effettivamente disponibili.
Per prima cosa, analizziamo il conteggio totale dei campioni. Per semplicità lo leggeremo dall'intestazione Xing, ma potrebbe essere creato 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 si otterrà il numero totale di campioni presenti 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 spaziatura interna. A seconda del tuo codificatore, questo può essere scritto sotto un tag LAME o Lavf nidificato nell'intestazione Xing. Esattamente 17 byte dopo questa intestazione ci sono 3 byte che rappresentano la spaziatura interna frontale e finale a 12 bit rispettivamente.
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
};
}
Inoltre, disponiamo di una funzione completa per analizzare la maggior parte dei contenuti vuoti. I casi limite sono certamente abbondanti, quindi è consigliabile fare attenzione prima di utilizzare un codice simile in produzione.
Appendice C: Informazioni sulla raccolta dei rifiuti
La memoria appartenente alle istanze SourceBuffer viene garbage collection attiva in base al tipo di contenuti, ai limiti specifici della piattaforma e alla posizione di riproduzione corrente. In Chrome, la memoria viene 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 problema se lo spazio vuoto è sufficientemente ridotto o si blocca completamente se il spazio vuoto è troppo ampio. Neanche un'esperienza utente ottimale, quindi è importante evitare di aggiungere troppi dati contemporaneamente e rimuovere manualmente dalla sequenza temporale multimediale gli intervalli non più necessari.
Gli intervalli possono essere rimossi con il metodo remove() su ogni SourceBuffer. che impiega un intervallo [start, end] in secondi. Come per appendBuffer(), ogni remove() attiverà un evento updateend una volta completato. Altre rimozioni o aggiunte non devono essere eseguite fino a quando non viene attivato l'evento.
In Chrome per computer desktop, puoi memorizzare contemporaneamente circa 12 megabyte di contenuti audio e 150 megabyte di contenuti video. Non devi fare affidamento su questi valori su più browser o piattaforme; ad es., di certo non sono rappresentativi dei dispositivi mobili.
La garbage collection influisce solo sui dati aggiunti a SourceBuffers; non ci sono limiti alla quantità di dati che puoi conservare nel buffer nelle variabili JavaScript. Se necessario, puoi anche riaggiungere gli stessi dati nella stessa posizione.