2014-06-10 9 views
9

Ich verwende die folgende Methode, um ein Byte-Array mit WAV-Daten zu spielen. Die Funktion wird von einem GWT-Projekt aufgerufen.Wie wav Audio-Byte-Array über Javascript/HTML5 zu spielen?

Diese Funktion gibt den Sound wieder, aber es klingt wie eine Art höllisches Monster. Die Samplerate ist definitiv korrekt (der Sound wird von neospeech erzeugt) und ich habe alle möglichen Werte für numberOfSamples ausprobiert, was nur zu zeigen scheint, wie lang die Audiodaten sind.

Ein Wert größer als 30000 für NumberOfSamples wird die volle Länge der Audiodatei wiedergeben, aber es ist verstümmelt und schrecklich.

Also, was mache ich falsch?

function playByteArray(byteArray, numberOfSamples) { 
    sampleRate = 8000; 

    if (!window.AudioContext) { 
     if (!window.webkitAudioContext) { 
      alert("Your browser does not support any AudioContext and cannot play back this audio."); 
      return; 
     } 
     window.AudioContext = window.webkitAudioContext; 
    } 

    var audioContext = new AudioContext(); 

    var buffer = audioContext.createBuffer(1, numberOfSamples, sampleRate); 
    var buf = buffer.getChannelData(0); 
    for (i = 0; i < byteArray.length; ++i) { 
     buf[i] = byteArray[i]; 
    } 

    var source = audioContext.createBufferSource(); 
    source.buffer = buffer; 
    source.connect(audioContext.destination); 
    source.start(0); 
} 

Antwort

17

ich herausgefunden, wie was zu tun ich in meiner Frage beschrieben und dachte, dass ich es für das Wohl anderer schreiben sollte. Der Code ist unten. Ich rufe playByteArray und übergebe es ein Byte-Array mit PCM WAV-Daten.

window.onload = init; 
var context; // Audio context 
var buf;  // Audio buffer 

function init() { 
if (!window.AudioContext) { 
    if (!window.webkitAudioContext) { 
     alert("Your browser does not support any AudioContext and cannot play back this audio."); 
     return; 
    } 
     window.AudioContext = window.webkitAudioContext; 
    } 

    context = new AudioContext(); 
} 

function playByteArray(byteArray) { 

    var arrayBuffer = new ArrayBuffer(byteArray.length); 
    var bufferView = new Uint8Array(arrayBuffer); 
    for (i = 0; i < byteArray.length; i++) { 
     bufferView[i] = byteArray[i]; 
    } 

    context.decodeAudioData(arrayBuffer, function(buffer) { 
     buf = buffer; 
     play(); 
    }); 
} 

// Play the loaded file 
function play() { 
    // Create a source node from the buffer 
    var source = context.createBufferSource(); 
    source.buffer = buf; 
    // Connect to the final output node (the speakers) 
    source.connect(context.destination); 
    // Play immediately 
    source.start(0); 
} 
+0

Great stuff, ich habe für ein kurzes, gekocht-down Beispiel wie diese suche –

2

Clean up-Vorschlag:

function playByteArray(bytes) { 
    var buffer = new Uint8Array(bytes.length); 
    buffer.set(new Uint8Array(bytes), 0); 

    context.decodeAudioData(buffer.buffer, play); 
} 

function play(audioBuffer) { 
    var source = context.createBufferSource(); 
    source.buffer = audioBuffer; 
    source.connect(context.destination); 
    source.start(0); 
}