blob: befb838ae0f76c7e4d77373c4da75e415a8aefbf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
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>
{{Compat("api.OfflineAudioContext")}}
<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>
|
