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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: AnalyserNode
slug: Web/API/AnalyserNode
translation_of: Web/API/AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>
<p><strong><code>AnalyserNode</code></strong>インタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。{{domxref("AudioNode")}}は、入力から出力の流れにおいてaudio streamそのものは変えず、データ加工や音声の可視化をすることができます。</p>
<p>１つの<code>AnalyzerNode</code>は必ず１つの入力と出力を持ちます。出力先がなくてもAnalyzerNodeは問題ありません。</p>
<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Number of inputs</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Number of outputs</th>
<td><code>1</code> (but may be left unconnected)</td>
</tr>
<tr>
<th scope="row">Channel count mode</th>
<td><code>"explicit"</code></td>
</tr>
<tr>
<th scope="row">Channel count</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Channel interpretation</th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
</table>
<h2 id="Inheritance">Inheritance</h2>
<p>このインタフェースは以下のインタフェースと継承関係にあります。:</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="Properties">Properties</h2>
<p><em> 以下は、</em><em>{{domxref("AudioNode")}}からプロパティを継承する</em>.</p>
<dl>
<dt>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>
<p>符号なしのlong型の値でFFT（<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform">高速フーリエ変換</a>）において周波数領域を決定するために使われているサイズを表している。</p>
</dd>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>符号なしのlong型でFFT（高速フーリエ変換）のサイズの半分の値。一般的に音声再生時の可視化に用いられる。</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>
<p>unsigned byte型値へ変換するFFT分析データのスケーリング時の最小のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。</p>
</dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dd>
<p>unsigned byte型値へ変換するFFT分析データのスケーリング時の最大のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。</p>
</dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>分析フレームの平均間隔を表すdouble型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>{{domxref("AudioNode")}}からメソッドを継承する</em>.</p>
<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>周波数データを引数として渡されたFloat32Array配列へコピーする。</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>周波数データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>音声波形データを引数として渡されたFloat32Array配列へコピーする。</dd>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>音声波形データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。</dd>
</dl>
<h2 id="Examples">Examples</h2>
<div class="note">
<p><strong>Note</strong>: オーディオヴィジュアライゼーションのためのWeb Audio APIを使ったヴィジュアライゼーションガイドを御覧ください。</p>
</div>
<h3 id="Basic_usage">Basic usage</h3>
<p>以下の例では、AudioContextから１つのAnalyserNodeを作成しており、requestAnimationFrameと<canvas>へ繰り返し時間波形データを繰り返し集め現入力を“オシロスコープスタイル”で出力し描画している。</p>
<p>より多くのサンプルは 我々の <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> デモにご覧頂けます。 (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>
<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
...
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// draw an oscilloscope of the current audio source
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * HEIGHT/2;
if(i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();
};
draw();</pre>
<h2 id="Specifications">Specifications</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', '#the-analysernode-interface', 'AnalyserNode')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.AnalyserNode")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
