---
title: AudioContext.decodeAudioData()
slug: Web/API/BaseAudioContext/decodeAudioData
translation_of: Web/API/BaseAudioContext/decodeAudioData
original_slug: Web/API/AudioContext/decodeAudioData
---
<p>{{ APIRef("Web Audio API") }}</p>

<div>
<p>Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} <code>response</code> Eigenschaft befüllt, nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.</p>
</div>

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

<h2 id="Syntax">Syntax</h2>

<p>Alte Callbacksyntax:</p>

<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) {
  // use the dec​oded data here
});</pre>

<p>Neue Promise basierte Syntax:</p>

<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) {
  // use the decoded data here
});</pre>

<h2 id="Beispiel">Beispiel</h2>

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

<h3 id="Ältere_Callbacksyntax">Ältere Callbacksyntax</h3>

<p>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 {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.</p>

<p>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.</p>

<div class="note">
<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p>
</div>

<pre class="brush: js">// 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;</pre>

<h3 id="Neue_Promise_basierte_Syntax">Neue Promise basierte Syntax</h3>

<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
 // Die dekodierten PCM Daten können hier verwendet werden
});</pre>

<h2 id="Parameter">Parameter</h2>

<dl>
 <dt>ArrayBuffer</dt>
 <dd>Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>.</dd>
 <dt>DecodeSuccessCallback</dt>
 <dd>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 {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.</dd>
 <dt>DecodeErrorCallback</dt>
 <dd>Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.</dd>
</dl>

<h2 id="Rückgabewerte">Rückgabewerte</h2>

<p>Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserunterstützung">Browserunterstützung</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
   <td>{{CompatGeckoDesktop(25.0)}} </td>
   <td>{{CompatNo}}</td>
   <td>15.0{{property_prefix("webkit")}}<br>
    22 (unprefixed)</td>
   <td>6.0{{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td>Promise-based syntax</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>26.0</td>
   <td>1.2</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(33.0)}}</td>
  </tr>
  <tr>
   <td>Promise-based syntax</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>