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
|
---
title: AnalyserNode
slug: Web/API/AnalyserNode
tags:
- API
- Web Audio API
- 오디오
translation_of: Web/API/AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>
<p><strong><code>AnalyserNode</code></strong><strong> </strong>는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.</p>
<p><code>AnalyzerNode</code> 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.</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>
<div class="note">
<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
</div>
<h2 id="Properties">Properties</h2>
<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p>
<dl>
<dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd>
<dt> </dt>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을 변환하는데 사용된다.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>{{domxref("AudioNode")}} 을 상속하는 메서드.</em></p>
<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 로 복사해 전달한다.</span></dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> </span>{{domxref("Uint8Array")}} (unsigned byte array)<span style="line-height: 1.5;"> 로 복사해 전달한다.</span></dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 배열에 전달한다.</span></dd>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 {{domxref("Uint8Array")}} (unsigned byte array) 로 전달한다.</dd>
</dl>
<h2 id="Example">Example</h2>
<p>이 예제는 {{domxref("AudioContext")}} 를 사용해 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">AnalyserNode를 생성하여 사용하는 방법을 보여주고, </span><span style="line-height: 1.5;"> {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및 </span><span style="line-height: 1.5;"> "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는 </span><span style="line-height: 1.5;"> </span><a href="http://mdn.github.io/voice-change-o-matic/" style="line-height: 1.5;">Voice-change-O-matic</a><span style="line-height: 1.5;"> demo (see </span><a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205" style="line-height: 1.5;">app.js lines 128–205</a><span style="line-height: 1.5;"> for relevant code)를 확인 하세요.</span></p>
<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
// 새로운 <span style="font-family: courier new,andale mono,monospace;">AnalyserNode를 생성한다.</span>
...
analyser.fftSize = 2048; // FFT의 크기를 2048로 한다.
var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수
var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성
analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달
// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다.
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>
|
