---
title: OfflineAudioContext
slug: Web/API/OfflineAudioContext
translation_of: Web/API/OfflineAudioContext
---
<div>{{APIRef("Web Audio API")}}</div>

<p><code>OfflineAudioContext</code> 接口是一个 {{domxref("AudioContext")}} 的接口，代表由多个 {{domxref("AudioNode")}} 连接在一起构成的音频处理图。与 {{domxref("AudioContext")}} 标准相反的是， <code>OfflineAudioContext</code> 不在硬件设备渲染音频；相反，它尽可能快地生成音频，输出一个 {{domxref("AudioBuffer")}} 作为结果。</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{domxref("OfflineAudioContext.OfflineAudioContext()")}}</dt>
 <dd>创建一个新的 <code>OfflineAudioContext</code> 实例。</dd>
</dl>

<h2 id="属性">属性</h2>

<p><em>从父级 {{domxref("AudioContext")}} 获取属性。</em></p>

<dl>
 <dt>{{domxref('OfflineAudioContext.length')}} {{readonlyinline}}</dt>
 <dd>代表采样帧缓冲区大小的整数。</dd>
</dl>

<h3 id="事件处理程序">事件处理程序</h3>

<dl>
 <dt>{{domxref("OfflineAudioContext.oncomplete")}}</dt>
 <dd>当进程完成时，基于事件版本的{{domxref("OfflineAudioContext.startRendering()")}} 被使用之后，{{event("Event_handlers", "event handler")}} 将会被调用，{{event("complete")}} 事件类型为 {{domxref("OfflineAudioCompletionEvent")}}）被触发。</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>从父级 {{domxref("AudioContext")}} 和 {{domxref("EventTarget")}} 获取方法的实现。</em></p>

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

<h2 id="例子">例子</h2>

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

<p>当 <code>startRendering()</code> 的 Promise 解决后，渲染也完成了，在 Promise 内可以获得输出的 <code>AudioBuffer。</code></p>

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

<div class="note">
<p><strong>注意</strong>: 为了获取可以运行的例子，请看我们在 Github 的仓库 <a href="https://mdn.github.io/webaudio-examples/offline-audio-context-promise/">offline-audio-context-promise</a> （也可以看到 <a href="https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise">源代码</a>。）</p>
</div>

<pre class="brush: js">// 定义一个在线或者离线的音频上下文

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();</pre>

<h2 id="备注">备注</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API', '#OfflineAudioContext', 'OfflineAudioContext')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(25.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>15.0{{property_prefix("webkit")}}<br>
    22 (unprefixed)</td>
   <td>6.0{{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>startRendering()</code></td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(37.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>suspend()</code>, <code>resume()</code></td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td><code>length</code></td>
   <td>{{CompatChrome(51.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>Edge</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(33.0)}}</td>
   <td>26.0</td>
   <td>1.2</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>startRendering()</code></td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>37.0</td>
   <td>2.2</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
  <tr>
   <td><code>suspend()</code>, <code>resume()</code></td>
   <td>{{CompatChrome(49.0)}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
  <tr>
   <td><code>length</code></td>
   <td>{{CompatChrome(51.0)}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatChrome(51.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 的运用</a></li>
</ul>