AudioContext.decodeAudioData()

Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.

Syntax

Alte Callbacksyntax:

audioCtx.decodeAudioData(audioData, function(decodedData) {
  // use the dec​oded data here
});

Neue Promise basierte Syntax:

audioCtx.decodeAudioData(audioData).then(function(decodedData) {
  // use the decoded data here
});

Beispiel

In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.

Ältere Callbacksyntax

In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen AudioBufferSourceNode mit Hilfe von AudioContext.createBufferSource(), verbindet diese Quelle mit AudioContext.destination und setzt den Schleifenmodus.

Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.

// Variablen definieren

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;

var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var play = document.querySelector('.play');
var stop = document.querySelector('.stop');

// Benutzt XHR um einen Track zu laden und
// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
// Anschließend wird der Buffer in eine Quelle kopiert.

function getData() {
  source = audioCtx.createBufferSource();
  var request = new XMLHttpRequest();

  request.open('GET', 'viper.ogg', true);

  request.responseType = 'arraybuffer';


  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
        source.buffer = buffer;

        source.connect(audioCtx.destination);
        source.loop = true;
      },

      function(e){"Error with decoding audio data" + e.err});

  }

  request.send();
}

// Buttons setzen um Wiedergabe zu starten und stoppen

play.onclick = function() {
  getData();
  source.start(0);
  play.setAttribute('disabled', 'disabled');
}

stop.onclick = function() {
  source.stop(0);
  play.removeAttribute('disabled');
}


// Script ausgeben

pre.innerHTML = myScript.innerHTML;

Neue Promise basierte Syntax

ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
 // Die dekodierten PCM Daten können hier verwendet werden
});

Parameter

ArrayBuffer

Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen XMLHttpRequest befüllt nachdem der responseType auf arraybuffer gesetzt wurde.

DecodeSuccessCallback

Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen AudioBufferSourceNode übergeben, von wo er wiedergeben und verändert werden kann.

DecodeErrorCallback

Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.

Rückgabewerte

Ein AudioBuffer der die dekodierten Audiodaten enthällt.

Spezifikationen

Browserunterstützung

Siehe auch

• Using the Web Audio API