离线音频上下文
OfflineAudioContext
接口是 AudioContext
接口,表示由相互连接的 AudioNode
构建的音频处理图。与标准 AudioContext
相比,OfflineAudioContext
不会将音频渲染到设备硬件;相反,它会尽可能快地生成音频,并将结果输出到 AudioBuffer
中。
构造函数
OfflineAudioContext()
-
创建一个新的
OfflineAudioContext
实例。
实例属性
还从其父接口 BaseAudioContext
继承属性。
OfflineAudioContext.length
只读-
一个整数,表示缓冲区的大小(以样本帧为单位)。
实例方法
还从其父接口 BaseAudioContext
继承方法。
OfflineAudioContext.suspend()
-
在指定时间安排暂停音频上下文中的时间进度,并返回一个 Promise。
OfflineAudioContext.startRendering()
-
开始渲染音频,同时考虑当前连接和当前计划的更改。本页介绍事件版和 Promise 版。
已弃用的方法
OfflineAudioContext.resume()
-
恢复先前已暂停的音频上下文中的时间进度。
注意:resume()
方法仍然可用 - 现在它是在 BaseAudioContext
接口中定义的(参见 AudioContext.resume
),因此可以通过 AudioContext
和 OfflineAudioContext
接口访问。
事件
使用 addEventListener()
或通过将事件侦听器分配到此接口的 oneventname
属性来侦听这些事件
complete
-
在离线音频上下文渲染完成时触发。
示例
使用离线音频上下文播放音频
在本例中,我们声明了 AudioContext
和 OfflineAudioContext
对象。我们使用 AudioContext
加载音频轨道 fetch()
,然后使用 OfflineAudioContext
将音频渲染到 AudioBufferSourceNode
并播放轨道。在设置好离线音频图之后,我们使用 OfflineAudioContext.startRendering()
将它渲染到 AudioBuffer
中。
当 startRendering()
Promise 解析时,渲染完成,输出 AudioBuffer
会从 Promise 中返回。
此时,我们创建另一个音频上下文,在其中创建 AudioBufferSourceNode
,并将其缓冲区设置为与 Promise AudioBuffer
相同。然后,它将在一个简单的标准音频图中播放。
// Define both online and offline audio contexts
let audioCtx; // Must be initialized after a user interaction
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
// Define constants for dom nodes
const play = document.querySelector("#play");
function getData() {
// Fetch an audio track, decode it and stick it in a buffer.
// Then we put the buffer into the source and can play it.
fetch("viper.ogg")
.then((response) => response.arrayBuffer())
.then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
.then((decodedBuffer) => {
console.log("File downloaded successfully.");
const source = new AudioBufferSourceNode(offlineCtx, {
buffer: decodedBuffer,
});
source.connect(offlineCtx.destination);
return source.start();
})
.then(() => offlineCtx.startRendering())
.then((renderedBuffer) => {
console.log("Rendering completed successfully.");
play.disabled = false;
const song = new AudioBufferSourceNode(audioCtx, {
buffer: renderedBuffer,
});
song.connect(audioCtx.destination);
// Start the song
song.start();
})
.catch((err) => {
console.error(`Error encountered: ${err}`);
});
}
// Activate the play button
play.onclick = () => {
play.disabled = true;
// We can initialize the context as the user clicked.
audioCtx = new AudioContext();
// Fetch the data and start the song
getData();
};
规范
规范 |
---|
Web 音频 API # 离线音频上下文 |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。