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.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-cn/web/api/baseaudiocontext/index.md)
AudioContext
接口的 decodeAudioData()
方法可用于异步解码音频文件中的 ArrayBuffer
。ArrayBuffer
数据可以通过 XMLHttpRequest
和 FileReader
来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的,然后通过回调返回结果。
这是从音频轨道创建用于 web audio API 音频源的首选方法。
语法
// 基于 Promise 的语法返回一个 Promise:
decodeAudioData(arrayBuffer)
// 回调语法没有返回值:
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)
举例
在本章节中,我们将首先学习基于回调的系统,然后采用新的基于 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