OfflineAudioContext

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.

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 兑现后，渲染也完成了，promise 会返回输出的 AudioBuffer。

在此刻，我们创建了一个另外的音频上下文，在它里面创建了一个 AudioBufferSourceNode，并且设置它的 buffer 为之前生成的 Promise 中的 AudioBuffer，这样它就可以作为简单标准音频图来播放了。

备注：你可以在线运行完整示例，或查看源代码。

// 定义一个在线或者离线的音频上下文
let audioCtx; // 必须在用户交互后初始化
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);

// 定义 DOM 节点的常量
const play = document.querySelector("#play");

function getData() {
  // 获取音频块，对其进行解码放入缓冲区。
  // 然后我们把缓冲区放进 source 对象，就可以播放了。
  fetch("viper.ogg")
    .then((response) => response.arrayBuffer())
    .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
    .then((decodedBuffer) => {
      console.log("文件下载成功。");
      const source = new AudioBufferSourceNode(offlineCtx, {
        buffer: decodedBuffer,
      });
      source.connect(offlineCtx.destination);
      return source.start();
    })
    .then(() => offlineCtx.startRendering())
    .then((renderedBuffer) => {
      console.log("渲染完全成功。");
      play.disabled = false;
      const song = new AudioBufferSourceNode(audioCtx, {
        buffer: renderedBuffer,
      });
      song.connect(audioCtx.destination);

      // 启动 song
      song.start();
    })
    .catch((err) => {
      console.error(`遇到错误：${err}`);
    });
}

// 激活播放按钮
play.onclick = () => {
  play.disabled = true;
  // 我们可以在用户单击时初始化上下文。
  audioCtx = new AudioContext();

  // 获取数据并启动 song
  getData();
};

规范

Specification
Web Audio API # OfflineAudioContext

浏览器兼容性

BCD tables only load in the browser

参见

Web Audio API 的运用