AudioContext.decodeAudioData() - Web API 接口参考 编辑

AudioContext接口的decodeAudioData()方法可用于异步解码音频文件中的 ArrayBuffer. ArrayBuffer数据可以通过XMLHttpRequest和FileReader来获取. 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将会被清除.

Note: You can run the example live (or view the 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

将会被解码的音频数据，可通过XMLHttpRequest或FileReader来获取.

DecodeSuccessCallback

当成功解码后会被调用的回调函数. 该回调函数只有一个AudioBuffer类型参数.

DecodeErrorCallback

一个可选的错误回调函数.

返回

一个 Promise对象.

标准

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!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	10.0webkit	25.0 (25.0)	未实现	15.0webkit 22 (unprefixed)	6.0webkit
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

• Using the Web Audio API