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对象.

标准

Specification Status Comment
Web Audio API
decodeAudioData()
Working Draft  

浏览器支持

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

文档标签和贡献者

 此页面的贡献者: Taoja, huangxok
 最后编辑者: Taoja,