离线音频上下文

基线 广泛可用

此功能已完善,可在许多设备和浏览器版本中使用。自以下时间起,它已在各浏览器中提供 2021 年 4 月.

OfflineAudioContext 接口是 AudioContext 接口,表示由相互连接的 AudioNode 构建的音频处理图。与标准 AudioContext 相比,OfflineAudioContext 不会将音频渲染到设备硬件;相反,它会尽可能快地生成音频,并将结果输出到 AudioBuffer 中。

EventTarget BaseAudioContext OfflineAudioContext

构造函数

OfflineAudioContext()

创建一个新的 OfflineAudioContext 实例。

实例属性

还从其父接口 BaseAudioContext 继承属性。

OfflineAudioContext.length 只读

一个整数,表示缓冲区的大小(以样本帧为单位)。

实例方法

还从其父接口 BaseAudioContext 继承方法。

OfflineAudioContext.suspend()

在指定时间安排暂停音频上下文中的时间进度,并返回一个 Promise。

OfflineAudioContext.startRendering()

开始渲染音频,同时考虑当前连接和当前计划的更改。本页介绍事件版和 Promise 版。

已弃用的方法

OfflineAudioContext.resume()

恢复先前已暂停的音频上下文中的时间进度。

注意:resume() 方法仍然可用 - 现在它是在 BaseAudioContext 接口中定义的(参见 AudioContext.resume),因此可以通过 AudioContextOfflineAudioContext 接口访问。

事件

使用 addEventListener() 或通过将事件侦听器分配到此接口的 oneventname 属性来侦听这些事件

complete

在离线音频上下文渲染完成时触发。

示例

使用离线音频上下文播放音频

在本例中,我们声明了 AudioContextOfflineAudioContext 对象。我们使用 AudioContext 加载音频轨道 fetch(),然后使用 OfflineAudioContext 将音频渲染到 AudioBufferSourceNode 并播放轨道。在设置好离线音频图之后,我们使用 OfflineAudioContext.startRendering() 将它渲染到 AudioBuffer 中。

startRendering() Promise 解析时,渲染完成,输出 AudioBuffer 会从 Promise 中返回。

此时,我们创建另一个音频上下文,在其中创建 AudioBufferSourceNode,并将其缓冲区设置为与 Promise AudioBuffer 相同。然后,它将在一个简单的标准音频图中播放。

注意:您可以在 运行完整的实时示例查看源代码

js
// 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 的浏览器中加载。

另请参阅