OfflineAudioContext

OfflineAudioContext 接口是一个 AudioContext 的接口,代表由多个 AudioNode 连接在一起构成的音频处理图。与 AudioContext 标准相反的是, OfflineAudioContext 不在硬件设备渲染音频;相反,它尽可能快地生成音频,输出一个 AudioBuffer 作为结果。

构造函数

OfflineAudioContext.OfflineAudioContext()
创建一个新的 OfflineAudioContext 实例。

属性

从父级 AudioContext 获取属性。

OfflineAudioContext.length 只读
代表采样帧缓冲区大小的整数。

事件处理程序

OfflineAudioContext.oncomplete (en-US)
当进程完成时,基于事件版本的OfflineAudioContext.startRendering() (en-US) 被使用之后,event handler 将会被调用,complete (en-US) 事件类型为 OfflineAudioCompletionEvent (en-US))被触发。

方法

从父级 AudioContext 和 EventTarget 获取方法的实现。

OfflineAudioContext.resume() (en-US)
恢复一个被暂停的音频的时间进程。
OfflineAudioContext.suspend()
在指定的时间安排音频暂停时间进程,并且通过 Promise 返回。
OfflineAudioContext.startRendering() (en-US)
开始渲染音频,考虑当前连接和当前计划的修改。这个页面涵盖基于事件的和基于 Promise 的版本。

例子

这个简单的例子中,我们声明了 AudioContext 和 OfflineAudioContext 对象。我们使用 AudioContext 去加载一个 XHR (AudioContext.decodeAudioData)获取的音轨,然后使用 OfflineAudioContext 去渲染音频并得到一个 into an AudioBufferSourceNode,并播放这个音轨。在离线音频处理图建立后,你需要去使用 OfflineAudioContext.startRendering (en-US) 来渲染它成为 AudioBuffer

当 startRendering() 的 Promise 解决后,渲染也完成了,在 Promise 内可以获得输出的 AudioBuffer。

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

注意: 为了获取可以运行的例子,请看我们在 Github 的仓库 offline-audio-context-promise (也可以看到 源代码。)

// 定义一个在线或者离线的音频上下文

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('渲染完全成功');
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var song = audioCtx.createBufferSource();
        song.buffer = renderedBuffer;

        song.connect(audioCtx.destination);

        play.onclick = function() {
          song.start();
        }
      }).catch(function(err) {
          console.log('渲染失败: ' + err);
          // 注意: 当 OfflineAudioContext 上 startRendering 被立刻调用,Promise 应该被 reject
      });
    });
  }

  request.send();
}

// 运行 getData 去开始这个进程

getData();

备注

Specification Status Comment
Web Audio API
OfflineAudioContext
Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit (en-US) (Yes) 25.0 (25.0) 未实现 15.0webkit (en-US)
22 (unprefixed)
6.0webkit (en-US)
Promise-based startRendering() 42.0 ? 37.0 (37.0) ? ? ?
suspend(), resume() 49.0 ?        
length 51.0 ?        
Feature Android Webview Firefox Mobile (Gecko) Firefox OS Edge IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 33.0 26.0 1.2 (Yes) ? ? ? (Yes)
Promise-based startRendering() 42.0 37.0 2.2 ? ? ? ? 42.0
suspend(), resume() 49.0     ?       49.0
length 51.0     ?       51.0

参见