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
136
137
138
139
140
141
142
143
144
|
---
title: OfflineAudioContext
slug: Web/API/OfflineAudioContext
translation_of: Web/API/OfflineAudioContext
---
<div>{{APIRef("Web Audio API")}}</div>
<div><code>OfflineAudioContext</code> インターフェイスは {{domxref("AudioContext")}} インターフェイスの一種で、{{domxref("AudioNode")}} をつなげて造られる音声処理グラフを表しています。通常の {{domxref("AudioContext")}} と異なり、<code>OfflineAudioContext</code> で処理された音声はハードウェアから再生されることはありません。処理された結果は {{domxref("AudioBuffer")}} に出力されます。</div>
<div> </div>
<p>{{InheritanceDiagram}}</p>
<h2 id="コンストラクター">コンストラクター</h2>
<dl>
<dt>{{domxref("OfflineAudioContext.OfflineAudioContext()")}}</dt>
<dd>新しい <code>OfflineAudioContext</code> のインスタンスを作成します。</dd>
</dl>
<h2 id="プロパティ">プロパティ</h2>
<p><em>親インターフェイスである {{domxref("BaseAudioContext")}} からのプロパティも継承します。</em></p>
<dl>
<dt>{{domxref('OfflineAudioContext.length')}} {{readonlyinline}}</dt>
<dd>サンプルフレーム数で表されるバッファの大きさの整数値。</dd>
</dl>
<h3 id="イベントハンドラー">イベントハンドラー</h3>
<dl>
<dt>{{domxref("OfflineAudioContext.oncomplete")}}</dt>
<dd>
<p>処理終了時に呼ばれる {{event("Event_handlers", "event handler")}} イベントハンドラーです。 {{event("complete")}} イベント (型は {{domxref("OfflineAudioCompletionEvent")}} )を受け取ります。このイベントは、{{domxref("OfflineAudioContext.startRendering()")}} のイベント駆動型が利用された場合、処理終了時に送出さます。</p>
</dd>
</dl>
<h2 id="メソッド">メソッド</h2>
<p><em>親インターフェースである {{domxref("BaseAudioContext")}} からのメソッドも継承します。</em></p>
<dl>
<dt>{{domxref("OfflineAudioContext.resume()")}}</dt>
<dd>Resumes the progression of time in an audio context that has previously been suspended.</dd>
<dt>{{domxref("OfflineAudioContext.suspend()")}}</dt>
<dd>Schedules a suspension of the time progression in the audio context at the specified time and returns a promise.</dd>
<dt>{{domxref("OfflineAudioContext.startRendering()")}}</dt>
<dd>Starts rendering the audio, taking into account the current connections and the current scheduled changes. This page covers both the event-based version and the promise-based version.</dd>
</dl>
<h2 id="例">例</h2>
<p>この例では、{{domxref("AudioContext")}} と <code>OfflineAudioContext</code> 二つのオブジェクトを作っています。<code>AudioContext</code> はXHR ({{domxref("AudioContext.decodeAudioData")}})でオーディオトラックを読み込むのに使い、<code>OfflineAudioContext</code> で{{domxref("AudioBufferSourceNode")}} の中に音声をレンダリングし、そしてその音声を再生します。オフライン音声グラフのセットアップが終わった後、{{domxref("OfflineAudioContext.startRendering")}} を使って {{domxref("AudioBuffer")}} にレンダリングする必要があります。</p>
<p><code>startRendering()</code> のPromiseが解決されるとレンダリングは完了し、出力結果の <code>AudioBuffer</code> がPromiseの結果として戻されます。</p>
<p>At this point we create another audio context, create an {{domxref("AudioBufferSourceNode")}} inside it, and set its buffer to be equal to the promise <code>AudioBuffer</code>. This is then played as part of a simple standard audio graph.</p>
<div class="note">
<p><strong>Note</strong>: For a working example, see our <a href="https://mdn.github.io/webaudio-examples/offline-audio-context-promise/">offline-audio-context-promise</a> Github repo (see the <a href="https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise">source code</a> too.)</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('Rendering completed successfully');
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('Rendering failed: ' + err);
// 注意: OfflineAudioContext の startRendering が二回以上呼び出されるとPromise はリジェクトされます。
});
});
}
request.send();
}
// getData で処理を開始する。
getData();</pre>
<h2 id="仕様書">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#OfflineAudioContext', 'OfflineAudioContext')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザーの対応">ブラウザーの対応</h2>
<div>
<p>{{Compat("api.OfflineAudioContext")}}</p>
</div>
<h2 id="関連情報">関連情報</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
