AudioContext.decodeAudioData()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

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

语法

旧版的回调函数语法

audioCtx.decodeAudioData(audioData, function(decodedData) {
  // use the decoded 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 将会被清除。

备注： 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
Web Audio API # dom-baseaudiocontext-decodeaudiodata

浏览器兼容性

BCD tables only load in the browser

参见

Using the Web Audio API