Streaming di dati audio in HTML5

Question

Sto ricevendo dati audio PCM dal server in piccoli blocchi e conservandoli in una matrice. Ora mi piacerebbe riprodurre questi frammenti audio in modo sequenziale senza lacune utilizzando alcune funzionalità HTML5. Due opzioni che sto guardando come soluzioni 'possibili' sono:

tag

1. HTML5 audio con Data URI
2. Web audio API

Mentre sto indagando queste opzioni, per favore mi suggeriscono qualsiasi altra opzione o sul sulle due opzioni che sto guardando. Sebbene una soluzione multipiattaforma sia la migliore, ma posso accontentarmi della soluzione solo Chrome come

Answer 1

L'opzione 1 probabilmente non funzionerà perché il tag audio non riproduce dati audio non elaborati (che presumo sia ciò che intendi per audio PCM dati, o sbaglio?). Ogni browser necessita di codec specifici. Il top della tag audio non è affatto affidabile per riprodurre le cose senza spazi vuoti.

L'opzione 2 potrebbe funzionare. L'API audio web contiene buffer che probabilmente potrebbero essere riempiti con dati grezzi e riprodotti, ma non ho mai provato a farlo. Il grande svantaggio adesso è questo; un. Chrome solo b. l'utente deve configurare chrome digitando about: flags e abilita Web Audio che potrebbe essere spaventoso per alcuni.

Una terza opzione sarebbe l'API di dati audio che è qualcosa di una via di mezzo. Non l'ho mai provato da solo, ma dalle specifiche sembra esattamente quello che stai cercando. Non so comunque delle implementazioni, quindi dovresti fare qualche ricerca da solo :) https://wiki.mozilla.org/Audio_Data_API#Writing_Audio

Per favore, non sto dando queste risposte in cima alla mia testa, e sono ancora abbastanza nuovo per HTML5 Audio.

Answer 2

La pianificazione dell'audio è qualcosa per cui è stata progettata l'API Web Audio. Se si dispone dei pezzi audio PCM decodificati come array digitati (AUDIO_CHUNKS), è possibile creare buffer audio per ogni blocco e programmarli in un momento esatto (uno dopo l'altro) utilizzando noteOn(). Qualcosa del tipo:

var startTime = 0; 

for (var i = 0, audioChunk; audioChunk = AUDIO_CHUNKS[i]; ++i) { 
    // Create/set audio buffer for each chunk 
    var audioBuffer = audioCtx.createBuffer(NUM_CHANNELS, NUM_SAMPLES, SAMPLE_RATE); 
    audioBuffer.getChannelData(0).set(audioChunk); 

    var source = audioCtx.createBufferSource(); 
    source.buffer = audioBuffer; 
    source.noteOn(startTime); 
    source.connect(audioCtx.destination); 

    startTime += audioBuffer.duration; 
}