[ko] Work for AnalyserNode and its child documents (#1658)

* translate analysernode/index.html

* translate analysernode/analysernode/index.html

* add picture

files/ko/web/api/analysernode/fttaudiodata_en.svg

* translate fftsize/index.html

* fix a paragraph

* translate frequencybincount/index.html

* fix a typo

* translate mindecibels/index.html

* translate maxdecibels/index.html

* change a word

* change a word

* translate smoothingtimeconstant/index.html

* translate getfloatfrequencydata/index.html

* change words

* translate getbytefrequencydata/index.html

* delete a letter

* translate getfloattimedomaindata/index.html

* translate getbytetimedomaindata/index.html

* add a letter

12 files changed, 1027 insertions, 86 deletions

diff --git a/files/ko/web/api/analysernode/analysernode/index.html b/files/ko/web/api/analysernode/analysernode/index.html
new file mode 100644
index 0000000000..dbec1b677e
--- /dev/null
+++ b/files/ko/web/api/analysernode/analysernode/index.html
@@ -0,0 +1,59 @@
+---
+title: AnalyserNode()
+slug: Web/API/AnalyserNode/AnalyserNode
+tags:
+  - API
+  - AnalyserNode
+  - Audio
+  - Constructor
+  - Media
+  - Reference
+  - Web Audio API
+browser-compat: api.AnalyserNode.AnalyserNode
+---
+<p>{{APIRef("'Web Audio API'")}}</p>
+
+<p class="summary"><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <strong><code>AnalyserNode()</code></strong> 생성자는 새로운 {{domxref("AnalyserNode")}} 객체 인스턴스를 생성합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <var>analyserNode</var> = new AnalyserNode(<var>context</var>, ?<var>options</var>);</pre>
+
+<h3 id="Parameters">매개변수</h3>
+
+<p><em>{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다.</em></p>
+
+<dl>
+ <dt><em>context</em></dt>
+ <dd>{{domxref("AudioContext")}} 또는 {{domxref("OfflineAudioContext")}}에의 참조.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>
+ <ul>
+  <li><strong><code>fftSize</code></strong>: <a href="https://en.wikipedia.org/wiki/Frequency_domain">주파수 영역</a> 분석에 대한 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">FFT</a>의 원하는 초기 사이즈. <br>
+   기본값은 <code>2048</code>입니다.</li>
+  <li><strong><code>maxDecibels</code></strong>: FFT 분석에 대한 <a href="https://en.wikipedia.org/wiki/Decibel">dB</a>단위로의 원하는 초기 최대 power.<br>
+   기본값은 <code>-30</code>입니다.</li>
+  <li><strong><code>minDecibels</code></strong>: FFT 분석에 대한 dB단위로의 원하는 초기 최소 power.<br>
+   기본값은 <code>-100</code>입니다.</li>
+  <li><strong><code>smoothingTimeConstant</code></strong>: FFT 분석에 대한 원하는 초기 smoothing 상수. 기본값은 <code>0.8</code>입니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">반환 값</h3>
+
+<p>새로운 {{domxref("AnalyserNode")}} 객체 인스턴스.</p>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("BaseAudioContext.createAnalyser()")}}, 동등한 팩토리 메서드</li>
+</ul>
diff --git a/files/ko/web/api/analysernode/fftsize/index.html b/files/ko/web/api/analysernode/fftsize/index.html
new file mode 100644
index 0000000000..6033ba3892
--- /dev/null
+++ b/files/ko/web/api/analysernode/fftsize/index.html
@@ -0,0 +1,96 @@
+---
+title: AnalyserNode.fftSize
+slug: Web/API/AnalyserNode/fftSize
+tags:
+  - API
+  - AnalyserNode
+  - Property
+  - Reference
+  - Web Audio API
+  - fftSize
+browser-compat: api.AnalyserNode.fftSize
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>fftSize</code></strong> 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.fftSize;
+<em>analyserNode</em>.fftSize = <em>newValue</em>;
+</pre>
+
+<h3 id="Value">값</h3>
+
+<p>FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.</p>
+
+<p>반드시 <math><semantics><msup><mn>2</mn><mn>5</mn></msup><annotation encoding="TeX">2^5</annotation></semantics></math>와 <math><semantics><msup><mn>2</mn><mn>15</mn></msup><annotation encoding="TeX">2^15</annotation></semantics></math> 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, <code>16384</code>, 그리고 <code>32768</code>. 기본값은 <code>2048</code>입니다.</p>
+
+<p class="note"><strong>참고</strong>: 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, <code>IndexSizeError</code>라는 이름의 {{domxref("DOMException")}}이 발생합니다.</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</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);
+
+// 현재 오디오 소스의 오실로스코프를 그립니다
+
+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 &lt; 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">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/frequencybincount/index.html b/files/ko/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..cd23d8edda
--- /dev/null
+++ b/files/ko/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,82 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+tags:
+  - API
+  - AnalyserNode
+  - Property
+  - Reference
+  - Web Audio API
+  - frequencyBinCount
+browser-compat: api.AnalyserNode.frequencyBinCount
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>frequencyBinCount</code></strong> 읽기 전용 속성은 {{domxref("AnalyserNode.fftSize")}} 값의 절반인 unsigned 정수입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <em>arrayLength</em> = <em>analyserNode</em>.frequencyBinCount;
+</pre>
+
+<h3 id="Value">값</h3>
+
+<p>{{domxref("AnalyserNode.getByteFrequencyData()")}}와 {{domxref("AnalyserNode.getFloatFrequencyData()")}}가 제공된 <code>TypedArray</code>내로 복사하는 값의 수와 동일한 unsigned 정수.</p>
+
+<p><a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>이 정의된 방법에 관계된 기술적인 이유로, 이것은 언제나 {{domxref("AnalyserNode.fftSize")}} 값의 절반입니다. 그러므로, 이것은 다음 중 하나입니다: <code>16</code>, <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, 그리고 <code>16384</code>.</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5 - 1;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth;
+  }
+};
+
+draw();</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/fttaudiodata_en.svg b/files/ko/web/api/analysernode/fttaudiodata_en.svg
new file mode 100644
index 0000000000..b1c40a3868
--- /dev/null
+++ b/files/ko/web/api/analysernode/fttaudiodata_en.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="692.929" height="206.323"><path fill="none" stroke="#010101" d="M25.556 31.667v59.458"/><path fill="#010101" d="M19.722 32.667l5.834-16.839 5.5 16.839zm210.915 51.914l16.839 5.834-16.839 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722 53.167h36.667s4.167-14.333 9-11c0 0 2.333.417 7.333 14 0 0 2.917 10.583 8 8.167 0 0 3.333-.417 6.667-14.167 0 0 3.333-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.333-2.666 6.167-13.5 0 0 3.167-12.667 9-7.667 0 0 2.292.562 5.667 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(252.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(23.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.556 90.667h205.081"/><path fill="none" stroke="#010101" d="M431.556 31.667v59.458"/><path fill="#010101" d="M425.722 32.667l5.834-16.839 5.5 16.839zm210.914 51.914l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722 53.167h36.666s4.167-14.333 9-11c0 0 2.334.417 7.334 14 0 0 2.916 10.583 8 8.167 0 0 3.334-.417 6.666-14.167 0 0 3.334-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.334-2.666 6.168-13.5 0 0 3.166-12.667 9-7.667 0 0 2.291.562 5.666 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(658.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(429.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.556 90.667h205.08"/><path fill="#010101" d="M401.636 47.489l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M273.555 53.576h128.081"/><path fill="#010101" d="M347.889 148.454l-5.834 16.84-5.5-16.84z"/><path fill="#719FD0" stroke="#010101" d="M299.222 35h86v96.5h-86z"/><text transform="translate(304.223 56.823)" font-family="'ArialMT'" font-size="11">AnalyserNode</text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M341.803 118v30.454"/><text transform="translate(331.889 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text><path fill="none" stroke="#2C2C76" stroke-miterlimit="10" d="M321.889 86.667h41l-8 29.333h-25.333z"/><g font-family="'ArialMT'" font-size="11"><text transform="translate(484.89 131.5)">unchanged output</text><text transform="translate(302.223 176.167)">frequency data</text></g></svg>
\ No newline at end of file
diff --git a/files/ko/web/api/analysernode/getbytefrequencydata/index.html b/files/ko/web/api/analysernode/getbytefrequencydata/index.html
new file mode 100644
index 0000000000..3d85f75ca5
--- /dev/null
+++ b/files/ko/web/api/analysernode/getbytefrequencydata/index.html
@@ -0,0 +1,102 @@
+---
+title: AnalyserNode.getByteFrequencyData()
+slug: Web/API/AnalyserNode/getByteFrequencyData
+tags:
+  - API
+  - AnalyserNode
+  - Method
+  - Reference
+  - Web Audio API
+browser-compat: api.AnalyserNode.getByteFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 주파수 데이터를 복사합니다.</p>
+
+<p>주파수 데이터는 0에서 255 스케일의 정수로 구성되어 있습니다.</p>
+
+<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p>
+
+<p>만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array는 frequencyBinCount와 같은 길이여야만 합니다
+
+void <em>analyser</em>.getByteFrequencyData(dataArray); // getByteFrequencyData()로부터 반환된 데이터로 Uint8Array를 채웁니다
+</pre>
+
+<h3 id="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br>
+ 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd>
+</dl>
+
+<h3 id="Return_value">반환 값</h3>
+
+<p>없음.</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="Parameters_2">매개변수</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}.</dd>
+</dl>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/getbytetimedomaindata/index.html b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html
new file mode 100644
index 0000000000..58c38f1288
--- /dev/null
+++ b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html
@@ -0,0 +1,98 @@
+---
+title: AnalyserNode.getByteTimeDomainData()
+slug: Web/API/AnalyserNode/getByteTimeDomainData
+tags:
+  - API
+  - AnalyserNode
+  - Method
+  - Reference
+  - Web Audio API
+browser-compat: api.AnalyserNode.getByteTimeDomainData
+---
+<p>{{ APIRef("Mountain View APIRef Project") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p>
+
+<p>만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">const audioCtx = new AudioContext();
+const analyser = audioCtx.createAnalyser();
+const dataArray = new Uint8Array(analyser.fftSize); // Uint8Array는 fftSize와 같은 길이여야만 합니다
+analyser.getByteTimeDomainData(dataArray); // getByteTimeDomainData()로부터 반환된 데이터로 Uint8Array를 채웁니다
+</pre>
+
+<h3 id="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>시간 영역 데이터가 복사될 {{domxref("Uint8Array")}}.<br>
+ 만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd>
+</dl>
+
+<h3 id="Return_value">반환 값</h3>
+
+<p><strong><code>void</code></strong> | 없음</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+const bufferLength = analyser.fftSize;
+const dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 현재 오디오 소스의 오실로스코프를 그립니다
+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)';
+
+  const sliceWidth = WIDTH * 1.0 / bufferLength;
+  let x = 0;
+
+  canvasCtx.beginPath();
+  for(var i = 0; i &lt; bufferLength; i++) {
+    const v = dataArray[i]/128.0;
+    const y = v * HEIGHT/2;
+
+    if(i === 0)
+      canvasCtx.moveTo(x, y);
+    else
+      canvasCtx.lineTo(x, y);
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(WIDTH, HEIGHT/2);
+  canvasCtx.stroke();
+};
+
+draw();
+</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/getfloatfrequencydata/index.html b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html
new file mode 100644
index 0000000000..ceef144941
--- /dev/null
+++ b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html
@@ -0,0 +1,129 @@
+---
+title: AnalyserNode.getFloatFrequencyData()
+slug: Web/API/AnalyserNode/getFloatFrequencyData
+tags:
+  - API
+  - AnalyserNode
+  - Method
+  - Reference
+  - Web Audio API
+browser-compat: api.AnalyserNode.getFloatFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>getFloatFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</p>
+
+<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> Hz 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p>
+
+<p>만약 여러분이 더 높은 성능을 원하고 정밀성에 대해서는 상관하지 않는다면, {{domxref("AnalyserNode.getByteFrequencyData()")}}을 대신 사용할 수 있는데, 이는 {{domxref("Uint8Array")}}에서 동작합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Float32Array(analyser.frequencyBinCount); // Float32Array는 frequencyBinCount와 같은 길이여야만 합니다
+
+void <em>analyser</em>.getFloatFrequencyData(dataArray); // getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다
+</pre>
+
+<h3 id="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>주파수 영역 데이터가 복사될 {{domxref("Float32Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br>
+ 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd>
+</dl>
+
+<h3 id="Return_value">반환 값</h3>
+
+<p>없음.</p>
+
+<h2 id="Example">예제</h2>
+
+<pre class="brush: js">const audioCtx = new AudioContext();
+const analyser = audioCtx.createAnalyser();
+// Float32Array는 frequencyBinCount와 같은 길이여야만 합니다
+const myDataArray = new Float32Array(analyser.frequencyBinCount);
+// getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다
+analyser.getFloatFrequencyData(myDataArray);
+</pre>
+
+<h3 id="Drawing_a_spectrum">스펙트럼 그리기</h3>
+
+<p>다음의 예제는 {{domxref("MediaElementAudioSourceNode")}}를 <code>AnalyserNode</code>에 연결하기 위한 {{domxref("AudioContext")}}의 기본 사용을 보여줍니다. 오디오가 재생되는 동안, 우리는 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}로 주파수 데이터를 반복적으로 수집하고 "winamp 막대그래프 스타일"을 {{htmlelement("canvas")}} 요소에 그립니다.</p>
+
+<p>더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요).</p>
+
+<pre class="brush: html, highlight:[15, 17, 18, 41]">&lt;!doctype html&gt;
+&lt;body&gt;
+&lt;script&gt;
+const audioCtx = new AudioContext();
+
+//오디오 소스를 생성합니다
+//여기서, 우리는 오디오 파일을 사용하나, 이것은 또한 예를 들자면 마이크 입력도 될 수 있습니다
+const audioEle = new Audio();
+audioEle.src = 'my-audio.mp3';//파일명을 여기 삽입하세요
+audioEle.autoplay = true;
+audioEle.preload = 'auto';
+const audioSourceNode = audioCtx.createMediaElementSource(audioEle);
+
+//analyser 노드를 생성합니다
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 256;
+const bufferLength = analyserNode.frequencyBinCount;
+const dataArray = new Float32Array(bufferLength);
+
+//오디오 노드 네트워크를 설정합니다
+audioSourceNode.connect(analyserNode);
+analyserNode.connect(audioCtx.destination);
+
+//2D canvas를 생성합니다
+const canvas = document.createElement('canvas');
+canvas.style.position = 'absolute';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+document.body.appendChild(canvas);
+const canvasCtx = canvas.getContext('2d');
+canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+
+function draw() {
+  //다음 draw를 예정시킵니다
+  requestAnimationFrame(draw);
+
+  //스펙트럼 데이터를 얻습니다
+  analyserNode.getFloatFrequencyData(dataArray);
+
+  //검은색 배경을 그립니다
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  //스펙트럼을 그립니다
+  const barWidth = (canvas.width / bufferLength) * 2.5;
+  let posX = 0;
+  for (let i = 0; i &lt; bufferLength; i++) {
+    const barHeight = (dataArray[i] + 140) * 2;
+    canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)';
+    canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2);
+    posX += barWidth + 1;
+  }
+};
+
+draw();
+&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/getfloattimedomaindata/index.html b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html
new file mode 100644
index 0000000000..ef85673388
--- /dev/null
+++ b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html
@@ -0,0 +1,104 @@
+---
+title: AnalyserNode.getFloatTimeDomainData()
+slug: Web/API/AnalyserNode/getFloatTimeDomainData
+tags:
+  - API
+  - AnalyserNode
+  - Method
+  - Reference
+  - Web Audio API
+browser-compat: api.AnalyserNode.getFloatTimeDomainData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getFloatTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Float32Array(analyser.fftSize); // Float32Array는 fftSize와 같은 길이일 필요가 있습니다
+analyser.getFloatTimeDomainData(dataArray); // getFloatTimeDomainData()로부터 반환된 데이터로 Float32Array를 채웁니다
+</pre>
+
+
+<h3 id="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.<br>
+ 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd>
+</dl>
+
+<h3 id="Return_value">반환 값</h3>
+
+<p>없음.</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요). </p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 1024;
+var bufferLength = analyser.fftSize;
+console.log(bufferLength);
+var dataArray = new Float32Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+  analyser.getFloatTimeDomainData(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 &lt; bufferLength; i++) {
+    var v = dataArray[i] * 200.0;
+    var y = HEIGHT/2 + v;
+
+    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="Parameters_2">매개변수</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.</dd>
+</dl>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html
index dcffff0050..9f02b456bb 100644
--- a/files/ko/web/api/analysernode/index.html
+++ b/files/ko/web/api/analysernode/index.html
@@ -3,35 +3,37 @@ title: AnalyserNode
 slug: Web/API/AnalyserNode
 tags:
   - API
+  - AnalyserNode
+  - Interface
+  - Reference
   - Web Audio API
-  - 오디오
-translation_of: Web/API/AnalyserNode
+browser-compat: api.AnalyserNode
 ---
 <p>{{APIRef("Web Audio API")}}</p>
 
-<p><strong><code>AnalyserNode</code></strong><strong> </strong>는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.</p>
+<p><strong><code>AnalyserNode</code></strong> 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.</p>
 
-<p><code>AnalyzerNode</code> 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.</p>
+<p><code>AnalyserNode</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>
+<p><img alt="오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다." src="fttaudiodata_en.svg"></p>
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row">Number of inputs</th>
+   <th scope="row">입력의 수</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>
+   <th scope="row">출력의 수</th>
+   <td><code>1</code> (그러나 연결되지 않은 채로 남아있을지도 모릅니다)</td>
   </tr>
   <tr>
    <th scope="row">Channel count mode</th>
-   <td><code>"explicit"</code></td>
+   <td><code>"max"</code></td>
   </tr>
   <tr>
    <th scope="row">Channel count</th>
-   <td><code>1</code></td>
+   <td><code>2</code></td>
   </tr>
   <tr>
    <th scope="row">Channel interpretation</th>
@@ -40,125 +42,129 @@ translation_of: Web/API/AnalyserNode
  </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="Inheritance">상속</h2>
+
+<p>이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:</p>
 
-<h2 id="Properties">Properties</h2>
+<p>{{InheritanceDiagram}}</p>
 
-<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p>
+<h2 id="Constructor">생성자</h2>
 
 <dl>
- <dt><span id="cke_bm_91S" class="hidden"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
- <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd>
- <dt> </dt>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd><code>AnalyserNode</code> 객체의 새로운 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="Properties">속성</h2>
+
+<p><em>부모인 {{domxref("AudioNode")}}로부터 속성을 상속받습니다</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>주파수 영역을 결정하는 데 사용될 FFT(<a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">Fast Fourier Transform</a>)의 사이즈를 나타내는 unsigned long 값입니다.</dd>
  <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
- <dd>부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.</dd>
+ <dd>FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</dd>
  <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
- <dd>double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
+ <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</dd>
  <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
- <dd>double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
+ <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</dd>
  <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
- <dd>double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을  변환하는데 사용된다.</dd>
+ <dd>마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.</dd>
 </dl>
 
-<h2 id="Methods">Methods</h2>
+<h2 id="Methods">메서드</h2>
 
-<p><em>{{domxref("AudioNode")}} 을 상속하는 메서드.</em></p>
+<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>
+ <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</dd>
  <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>
+ <dd>전달된 {{domxref("Uint8Array")}} (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.</dd>
  <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
- <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 배열에 전달한다.</span></dd>
+ <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd>
  <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
- <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 {{domxref("Uint8Array")}} (unsigned byte array) 로 전달한다.</dd>
+ <dd>전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd>
 </dl>
 
-<h2 id="Example">Example</h2>
+<h2 id="Examples">예제</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>
+<div class="note">
+<p><strong>참고</strong>: 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a> 가이드를 참고하세요.</p>
+</div>
+
+<h3 id="Basic_usage">기본 사용</h3>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+
+// ...
 
-<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;
+
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 분석될 소스에 연결합니다
+source.connect(analyser);
 
-analyser.fftSize = 2048; // FFT의 크기를 2048로 한다.
-var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수
-var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성
-analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달
+// ID "oscilloscope"로 정의된 canvas를 얻습니다
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
 
-// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다.
+// 현재 오디오 소스의 오실로스코프를 그립니다
 
 function draw() {
 
-      drawVisual = requestAnimationFrame(draw);
+  requestAnimationFrame(draw);
 
-      analyser.getByteTimeDomainData(dataArray);
+  analyser.getByteTimeDomainData(dataArray);
 
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
-      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
 
-      canvasCtx.beginPath();
+  canvasCtx.beginPath();
 
-      var sliceWidth = WIDTH * 1.0 / bufferLength;
-      var x = 0;
+  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var x = 0;
 
-      for(var i = 0; i &lt; bufferLength; i++) {
+  for (var i = 0; i &lt; bufferLength; i++) {
 
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
+    var v = dataArray[i] / 128.0;
+    var y = v * canvas.height / 2;
 
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
+    if (i === 0) {
+      canvasCtx.moveTo(x, y);
+    } else {
+      canvasCtx.lineTo(x, y);
+    }
 
-        x += sliceWidth;
-      }
+    x += sliceWidth;
+  }
 
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
+  canvasCtx.lineTo(canvas.width, canvas.height / 2);
+  canvasCtx.stroke();
+}
 
-    draw();</pre>
+draw();
+</pre>
 
-<h2 id="Specifications">Specifications</h2>
+<h2 id="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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
 
-<p>{{Compat("api.AnalyserNode")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">같이 보기</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
 </ul>
diff --git a/files/ko/web/api/analysernode/maxdecibels/index.html b/files/ko/web/api/analysernode/maxdecibels/index.html
new file mode 100644
index 0000000000..5961655b25
--- /dev/null
+++ b/files/ko/web/api/analysernode/maxdecibels/index.html
@@ -0,0 +1,85 @@
+---
+title: AnalyserNode.maxDecibels
+slug: Web/API/AnalyserNode/maxDecibels
+tags:
+  - API
+  - AnalyserNode
+  - Property
+  - Reference
+  - Web Audio API
+  - maxDecibels
+browser-compat: api.AnalyserNode.maxDecibels
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>maxDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.maxDecibels;
+<em>analyserNode</em>.maxDecibels = <em>newValue</em>;
+</pre>
+
+<h3 id="Value">값</h3>
+
+<p>FFT 분석 데이터를 스케일링하는 것에 대한 최대 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-30</code> dB입니다.</p>
+
+<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>maxDecibels</code> 또는 더 높은 진폭을 가진 모든 주파수는 <code>255</code>로 반환됩니다.</p>
+
+<p class="note"><strong>참고</strong>: 만약 <code>AnalyserNode.minDecibels</code>보다 더 작거나 같은 값이 설정된다면, <code>IndexSizeError</code> 예외가 발생합니다.</p>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/mindecibels/index.html b/files/ko/web/api/analysernode/mindecibels/index.html
new file mode 100644
index 0000000000..95c51692e5
--- /dev/null
+++ b/files/ko/web/api/analysernode/mindecibels/index.html
@@ -0,0 +1,87 @@
+---
+title: AnalyserNode.minDecibels
+slug: Web/API/AnalyserNode/minDecibels
+tags:
+  - API
+  - AnalyserNode
+  - Property
+  - Reference
+  - Web Audio API
+  - minDecibels
+browser-compat: api.AnalyserNode.minDecibels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>minDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.minDecibels;
+<em>analyserNode</em>.minDecibels = <em>newValue</em>;
+</pre>
+
+<h3 id="Value">값</h3>
+
+<p>FFT 분석 데이터를 스케일링하는 것에 대한 최소 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-100</code> dB입니다.</p>
+
+<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>minDecibels</code> 또는 더 낮은 진폭을 가진 모든 주파수는 <code>0</code>으로 반환됩니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 만약 <code>AnalyserNode.maxDecibels</code>보다 더 큰 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p>
+</div>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/analysernode/smoothingtimeconstant/index.html b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html
new file mode 100644
index 0000000000..18d643160f
--- /dev/null
+++ b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html
@@ -0,0 +1,92 @@
+---
+title: AnalyserNode.smoothingTimeConstant
+slug: Web/API/AnalyserNode/smoothingTimeConstant
+tags:
+  - API
+  - AnalyserNode
+  - Property
+  - Reference
+  - Web Audio API
+  - smoothingTimeConstant
+browser-compat: api.AnalyserNode.smoothingTimeConstant
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>smoothingTimeConstant</code></strong> 속성은 마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다. 이것은 기본적으로 현재 버퍼와 <code>AnalyserNode</code>가 처리한 마지막 버퍼 사이의 평균이고, 더욱 매끄러운 시간에 대한 값 변화의 집합을 결과로 낳습니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre class="brush: js">var <em>smoothValue</em> = <em>analyserNode</em>.smoothingTimeConstant;
+<em>analyserNode</em>.smoothingTimeConstant = <em>newValue</em>;
+</pre>
+
+<h3 id="Value">값</h3>
+
+<p><code>0</code>에서 <code>1</code>까지의 범위 내의 double (<code>0</code>은 시간 에버리징이 없음을 의미). 기본값은 <code>0.8</code>입니다.</p>
+
+<p>만약 0이 설정된다면, 완료된 에버리징이 없는 것이지만, 1의 값은 "값을 계산하는 동안 이전과 현재 버퍼를 많이 겹치기"를 의미하는데, 이는 근본적으로 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 호출에 걸쳐 변화들을 매끄럽게 합니다.</p>
+
+<p>기술적인 측면에서, 우리는 <a href="https://webaudio.github.io/web-audio-api/#blackman-window">Blackman window</a>를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 만약 범위 0-1 바깥의 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p>
+</div>
+
+<h2 id="Example">예제</h2>
+
+<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>
+
+<p>만약 여러분이 <code>smoothingTimeConstant()</code>이 가진 영향에 대해 궁금하다면, 위의 예제를 복사해서 <code>analyser.smoothingTimeConstant = 0;</code>을 대신 설정해 보세요. 값 변화가 더욱 삐걱거리는 것을 인지하실 것입니다.</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+analyser.smoothingTimeConstant = 0.85;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
+</ul>