OfflineAudioContext - 表示通过链接在一起的 AudioNode 构建的音频处理图

OfflineAudioContext 接口是一个 AudioContext 接口,表示通过链接在一起的 AudioNode 构建的音频处理图。与标准 AudioContext 相比,OfflineAudioContext 不会将音频输出到设备硬件。相反,它将尽可能快地生成它,并将结果输出到 AudioBuffer

构造函数

OfflineAudioContext.OfflineAudioContext()

创建一个新的 OfflineAudioContext 实例。

属性

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

OfflineAudioContext.length 只读

一个整数,表示样本帧中缓冲区的大小。

事件处理程序

OfflineAudioContext.oncomplete

一个 EventHandler,在处理终止时,即在触发 complete 事件(类型为 OfflineAudioCompletionEvent)时,使用基于事件的版本 OfflineAudioContext.startRendering() 之后调用。

方法

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

OfflineAudioContext.suspend()

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

OfflineAudioContext.startRendering()

考虑到当前连接和当前计划的更改,开始渲染音频。此页面涵盖基于事件的版本和基于 Promise 的版本。

废弃的方法

OfflineAudioContext.resume()

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

注意resume() 方法仍然可用 - 它现在在 BaseAudioContext 接口上定义(请参见 BaseAudioContext.resume()),因此可以同时通过 AudioContextOfflineAudioContext 接口进行访问。

事件

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

complete

离线音频上下文的渲染完成时触发。也可以使用 oncomplete 事件处理程序属性来使用。

实例

在这个简单的实例中,我们同时声明了 AudioContextOfflineAudioContext 对象。我们使用 AudioContext 通过 XHR(AudioContext.decodeAudioData)加载音频轨道,然后使用 OfflineAudioContext 将音频渲染到 AudioBufferSourceNode 和播放曲目。设置离线音频图之后,您需要使用 OfflineAudioContext.startRendering 将其渲染到 AudioBuffer

In this simple example, we declare both an AudioContext and an OfflineAudioContext object. We use the AudioContext to load an audio track via XHR (AudioContext.decodeAudioData), then the OfflineAudioContext to render the audio into an AudioBufferSourceNode and play the track through. After the offline audio graph is set up, you need to render it to an AudioBuffer using OfflineAudioContext.startRendering.

startRendering() Promise 解决时,渲染已完成,在 Promise 内可以获得输出 AudioBuffer

至此,我们创建了另一个音频上下文,在其中创建了一个 AudioBufferSourceNode,并且设置它的 buffer 为之前生成的 Promise 中的 AudioBuffer。然后将其作为简单的标准音频图的一部分进行播放。

注意:有关工作实例,请参见我们的 offline-audio-context-promise Github 存储库(请参见源代码。)

// 定义在线和离线音频上下文
var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2,44100*40,44100);

source = offlineCtx.createBufferSource();

// 使用 XHR 加载音轨,然后使用 decodeAudioData 对其进行解码,并使用 OfflineAudioContext 对其进行渲染
function getData() {
  request = new XMLHttpRequest();

  request.open('GET', 'viper.ogg', true);

  request.responseType = 'arraybuffer';

  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx.startRendering().then(function(renderedBuffer) {
        console.log('Rendering completed successfully');
        var song = audioCtx.createBufferSource();
        song.buffer = renderedBuffer;

        song.connect(audioCtx.destination);

        play.onclick = function() {
          song.start();
        }
      }).catch(function(err) {
          console.log('Rendering failed: ' + err);
          // 注意:当在 OfflineAudioContext 上再次调用 startRendering 时,Promise 应该拒绝
      });
    });
  }

  request.send();
}

// 运行 getData 以启动该过程
getData();

规范

规范 状态 备注
Web Audio API
OfflineAudioContext 的定义
工作草案 初始定义

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持14 支持25 不支持156
OfflineAudioContext() 构造函数551 未知53 不支持42 未知
complete event141225 不支持156
length5114 支持 不支持38 不支持
oncomplete141225 不支持156
resume49 支持 不支持 不支持36 不支持
startRendering141225 不支持156
suspend49 支持 不支持 不支持36 不支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 支持18 未知26 未知14 未知
OfflineAudioContext() 构造函数552551 未知53 未知42 未知
complete event 支持18 未知26 未知14 未知
length5151 未知 支持 未知41 不支持
oncomplete 支持18 未知26 未知14 未知
resume4949 未知 不支持 未知36 不支持
startRendering 支持18 未知26 未知14 未知
suspend4949 未知 不支持 未知36 不支持

1. 在 Chrome 59 之前,不支持默认值。

2. 在 59 版本之前,不支持默认值。

相关链接