---
title: AudioContext.decodeAudioData()
slug: Web/API/BaseAudioContext/decodeAudioData
tags:
  - API
  - Audio
  - audio接口
  - 音频解码
translation_of: Web/API/BaseAudioContext/decodeAudioData
original_slug: Web/API/AudioContext/decodeAudioData
---
<p>{{ APIRef("Web Audio API") }}</p>

<div>
<p>{{ domxref("AudioContext") }}接口的<code>decodeAudioData()方法可用于异步解码</code>音频文件中的 {{domxref("ArrayBuffer")}}. <code>ArrayBuffer数据可以通过</code>{{domxref("XMLHttpRequest")}}和{{domxref("FileReader")}}来获取. AudioBuffer是通过AudioContext采样率进行解码的,然后通过回调返回结果.</p>
</div>

<p>这是从音频轨道创建用于web audio API音频源的首选方法。</p>

<h2 id="语法">语法</h2>

<p>旧版的回调函数语法</p>

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

<p>新版的promise-based语法:</p>

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

<h2 id="举例">举例</h2>

<p>在本章节中，我们将首先学习基于回调的系统，然后采用新的基于promise-based的语法</p>

<h3 id="旧的回调语法">旧的回调语法</h3>

<p>在这个事例中, <code>getData()</code> 方法使用XHR加载一个音轨,设置请求的responsetype为ArrayBuffer使它返回一个arraybuffer数据，然后存储在audioData变量中. 然后我们将这个arraybuffer数据置于<code>decodeAudioData()方法中使用，当成功解码PCM Data后通过回调返回</code>, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的.</p>

<p>通过按钮来运行 <code>getData()</code> 来获取音轨并播放它. 当使用 <code>stop()</code> 方法后source将会被清除.</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">// define variables

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');

// use XHR to load an audio track, and
// decodeAudioData to decode it and stick it in a buffer.
// Then we put the buffer into the source

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();
}

// wire up buttons to stop and play audio

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

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


// dump script to pre element

pre.innerHTML = myScript.innerHTML;</pre>

<h3 id="新的promise-based语法">新的promise-based语法</h3>

<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
 // use the decoded data here
});</pre>

<h2 id="参数">参数</h2>

<dl>
 <dt>ArrayBuffer</dt>
 <dd>将会被解码的音频数据，可通过{{domxref("XMLHttpRequest")}}或{{domxref("FileReader")}}来获取.</dd>
 <dt>DecodeSuccessCallback</dt>
 <dd>当成功解码后会被调用的回调函数. 该回调函数只有一个AudioBuffer类型参数.</dd>
 <dt>DecodeErrorCallback</dt>
 <dd>一个可选的错误回调函数.</dd>
</dl>

<h2 id="返回">返回</h2>

<p>一个 {{domxref("Promise") }}对象.</p>

<h2 id="标准">标准</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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="浏览器支持">浏览器支持</h2>

{{Compat("api.BaseAudioContext.decodeAudioData")}}

<h2 id="See_also">See also</h2>

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