AudioContext.decodeAudioData()

AudioContext接口的decodeAudioData()方法可用于异步解码音频文件中的 ArrayBuffer. ArrayBuffer数据可以通过XMLHttpRequestFileReader来获取. AudioBuffer是通过AudioContext采样率进行解码的,然后通过回调返回结果.

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

语法

旧版的回调函数语法

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

新版的promise-based语法:

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

举例

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

旧的回调语法

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

通过按钮来运行 getData() 来获取音轨并播放它. 当使用 stop() 方法后source将会被清除.

// 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;

新的promise-based语法

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

参数

ArrayBuffer
将会被解码的音频数据,可通过XMLHttpRequestFileReader来获取.
DecodeSuccessCallback
当成功解码后会被调用的回调函数. 该回调函数只有一个AudioBuffer类型参数.
DecodeErrorCallback
一个可选的错误回调函数.

返回

一个 Promise (en-US)对象.

标准

Specification Status Comment
Web Audio API
decodeAudioData()
Working Draft  

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit (en-US) 25.0 (25.0)  未实现 15.0webkit (en-US)
22 (unprefixed)
6.0webkit (en-US)
Promise-based syntax 49.0 (Yes) 未实现 (Yes) 未实现
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) 26.0 1.2 ? ? ? 33.0
Promise-based syntax ? 49.0 (Yes) (Yes) 未实现 ? ? 49.0

See also