---
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>