[ko] Translation done to 'Visualizations with Web Audio API' document (#2785)

* translate the below document.

Visualizations with Web Audio API

* fix a flaw

* change translation

Co-authored-by: JO YUN HO <yujo.dev@gmail.com>

* change translation

Co-authored-by: JO YUN HO <yujo.dev@gmail.com>

Co-authored-by: JO YUN HO <yujo.dev@gmail.com>

1 files changed, 41 insertions, 41 deletions

diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
index c0dd84ee68..500b88b7fa 100644
--- a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
+++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -1,5 +1,5 @@
 ---
-title: Visualizations with Web Audio API
+title: Web Audio API로 시각화하기
 slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 tags:
   - API
@@ -11,22 +11,22 @@ tags:
   - waveform
 ---
 <div class="summary">
-<p>One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.</p>
+<p>Web Audio API의 가장 흥미로운 기능 중 하나는 주파수, 파형, 그리고 다른 데이터들을 오디오 소스로부터 추출할 수 있는 능력인데, 이는 그리고 나서 시각화하는 데 사용될 수 있습니다. 이 글은 어떻게 시각화를 하는지 설명하고, 기초적인 사용 방법을 두 개 제공합니다.</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: You can find working examples of all the code snippets in our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo.</p>
+<p><strong>참고</strong>: 모든 코드의 작동 예제를 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모에서 찾을 수 있습니다.</p>
 </div>
 
-<h2 id="Basic_concepts">Basic concepts</h2>
+<h2 id="Basic_concepts">기본 개념</h2>
 
-<p>To extract data from your audio source, you need an {{ domxref("AnalyserNode") }}, which is created using the {{ domxref("BaseAudioContext.createAnalyser") }} method, for example:</p>
+<p>오디오 소스에서 데이터를 추출하려면, 여러분은 {{ domxref("AnalyserNode") }}가 필요한데, 이는 {{ domxref("BaseAudioContext.createAnalyser") }}를 사용하여 생성됩니다. 예를 들자면:</p>
 
 <pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 </pre>
 
-<p>This node is then connected to your audio source at some point between your source and your destination, for example:</p>
+<p>그리고 나서 이 노드는 소스와 목적지 사이의 어떤 지점에서 여러분의 오디오 소스에 연결되는데, 예를 들자면:</p>
 
 <pre class="brush: js">source = audioCtx.createMediaStreamSource(stream);
 source.connect(analyser);
@@ -34,74 +34,74 @@ analyser.connect(distortion);
 distortion.connect(audioCtx.destination);</pre>
 
 <div class="note">
-<p><strong>Note</strong>: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node.</p>
+<p><strong>참고</strong>: 입력이 소스에 직접적으로든 혹은 다른 노드를 경유하든 연결되어 있는 한, 여러분은 analyser의 출력을 다른 노드에 이것이 작동하도록 연결할 필요가 없습니다.</p>
 </div>
 
-<p>The analyser node will then capture audio data using a Fast Fourier Transform (fft) in a certain frequency domain, depending on what you specify as the {{ domxref("AnalyserNode.fftSize") }} property value (if no value is specified, the default is 2048.)</p>
+<p>analyser 노드는 그리고 나서,  여러분이 {{ domxref("AnalyserNode.fftSize") }} 속성 값에 명시한 것에 따라, 고속 푸리에 변환 (fft) 을 사용하여 특정한 주파수 도메인에 있는 오디오 데이터를 캡쳐합니다. (만약 값이 명시되어 있지 않으면, 기본값은 2048입니다.)</p>
 
 <div class="note">
-<p><strong>Note</strong>: You can also specify a minimum and maximum power value for the fft data scaling range, using {{ domxref("AnalyserNode.minDecibels") }} and {{ domxref("AnalyserNode.maxDecibels") }}, and different data averaging constants using {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Read those pages to get more information on how to use them.</p>
+<p><strong>참고</strong>: 여러분은 또한 {{ domxref("AnalyserNode.minDecibels") }}과 {{ domxref("AnalyserNode.maxDecibels") }}을 사용하여 fft 데이터 스케일링 범위에 대해 최소와 최대 power 값을 명시할 수 있고, {{ domxref("AnalyserNode.smoothingTimeConstant") }}를 사용하여 각각 다른 데이터 averaging 상수를 명시할 수 있습니다. 이것들을 어떻게 사용하는지에 대해서는 각 페이지를 읽어 보세요.</p>
 </div>
 
-<p>To capture data, you need to use the methods {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getByteFrequencyData()") }} to capture frequency data, and {{ domxref("AnalyserNode.getByteTimeDomainData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} to capture waveform data.</p>
+<p>데이터를 캡쳐하기 위해서는, 여러분은 주파수 데이터를 캡쳐하기 위해 {{ domxref("AnalyserNode.getFloatFrequencyData()") }}와 {{ domxref("AnalyserNode.getByteFrequencyData()") }} 메서드를 사용할 필요가 있고, 파형 데이터를 캡쳐하기 위해서는 {{ domxref("AnalyserNode.getByteTimeDomainData()") }}와 {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}를 사용할 필요가 있습니다.</p>
 
-<p>These methods copy data into a specified array, so you need to create a new array to receive the data before invoking one. The first one produces 32-bit floating point numbers, and the second and third ones produce 8-bit unsigned integers, therefore a standard JavaScript array won't do — you need to use a {{ domxref("Float32Array") }} or {{ domxref("Uint8Array") }} array, depending on what data you are handling.</p>
+<p>이 메서드들은 데이터를 명시된 배열에 복사하므로, 여러분은 메서드를 호출하기 전에 데이터를 받기 위한 새로운 배열을 만들 필요가 있습니다. 첫번째 메서드는 32비트 부동 숫자를 만들고, 두번째와 세번째는 8비트 unsigned 정수를 만들기 때문에, 표준 JavaScript 배열은 이를 수행할 수 없습니다 — 여러분이 어떤 데이터를 다루느냐에 따라, {{ domxref("Float32Array") }}나 {{ domxref("Uint8Array") }}배열을 사용할 필요가 있습니다.</p>
 
-<p>So for example, say we are dealing with an fft size of 2048. We return the {{ domxref("AnalyserNode.frequencyBinCount") }} value, which is half the fft, then call Uint8Array() with the frequencyBinCount as its length argument — this is how many data points we will be collecting, for that fft size.</p>
+<p>그래서 예를 들자면, 우리가 2048의 fft 사이즈를 다루고 있다고 해 봅시다. 우리는 fft의 절반인 {{ domxref("AnalyserNode.frequencyBinCount") }} 값을 반환하고, 그리고 나서 Uint8Array의 길이 인자로서 frequencyBinCount와 함께 Uint8Array()을 호출합니다 — 이것은 얼마나 많은 데이터 포인트를 우리가 그 fft 사이즈에 대해 수집할 것인지를 나타냅니다.</p>
 
 <pre class="brush: js">analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);</pre>
 
-<p>To actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument. For example:</p>
+<p>실제로 데이터를 얻고 배열에 복사하기 위해서, 우리는 그리고 나서 우리가 원하는 데이터 수집 메서드를 그것의 인자로서 전달된 배열과 함께 호출합니다. 예를 들자면:</p>
 
 <pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre>
 
-<p>We now have the audio data for that moment in time captured in our array, and can proceed to visualize it however we like, for example by plotting it onto an HTML5 {{ htmlelement("canvas") }}.</p>
+<p>우리는 이제 시간으로 그 순간에 대해 배열 속에 캡쳐된 오디오 데이터를 가지고 있고, 우리가 원하는 대로 시각화를 진행할 수 있는데, 예를 들자면 이것을 HTML5 {{ htmlelement("canvas") }}에 그려볼 수 있습니다.</p>
 
-<p>Let's go on to look at some specific examples.</p>
+<p>몇몇 구체적인 예제를 살펴봅시다.</p>
 
-<h2 id="Creating_a_waveformoscilloscope">Creating a waveform/oscilloscope</h2>
+<h2 id="Creating_a_waveformoscilloscope">파형/오실로스코프 생성하기</h2>
 
-<p>To create the oscilloscope visualisation (hat tip to <a href="http://soledadpenades.com/">Soledad Penadés</a> for the original code in <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), we first follow the standard pattern described in the previous section to set up the buffer:</p>
+<p>오실로스코프 시각화를 만들기 위해서는 (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a> 내의 원본 코드에 대해 <a href="https://soledadpenades.com/">Soledad Penadés</a>께 인사를 보냅니다), 우리는 우선 버퍼를 설정하기 위해 이전 섹션에서 설명된 표준 패턴을 따라야 합니다.</p>
 
 <pre class="brush: js">analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);</pre>
 
-<p>Next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display:</p>
+<p>다음으로, 우리는 새로운 시각화 디스플레이를 준비하기 위해 캔버스 위에 이전에 그려진 것을 지웁니다.</p>
 
 <pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
 
-<p>We now define the <code>draw()</code> function:</p>
+<p>우리는 이제 <code>draw()</code> 함수를 정의합니다:</p>
 
 <pre class="brush: js">function draw() {</pre>
 
-<p>In here, we use <code>requestAnimationFrame()</code> to keep looping the drawing function once it has been started:</p>
+<p>여기서, 우리는 드로잉 함수가 한 번 시작되면 계속 반복되도록 <code>requestAnimationFrame()</code>을 사용합니다.</p>
 
 <pre class="brush: js">var drawVisual = requestAnimationFrame(draw);</pre>
 
-<p>Next, we grab the time domain data and copy it into our array</p>
+<p>다음으로, 우리는 시간 도메인 데이터를 배열에 복사합니다.</p>
 
 <pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre>
 
-<p>Next, fill the canvas with a solid color to start</p>
+<p>다음으로, 시작하기 위해 캔버스를 단색으로 채웁니다.</p>
 
 <pre class="brush: js">canvasCtx.fillStyle = 'rgb(200, 200, 200)';
 canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
 
-<p>Set a line width and stroke color for the wave we will draw, then begin drawing a path</p>
+<p>우리가 그릴 파동에 대해 선의 굵기와 색상을 설정하고, 경로를 그리기 시작합니다.</p>
 
 <pre class="brush: js">canvasCtx.lineWidth = 2;
 canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
 canvasCtx.beginPath();</pre>
 
-<p>Determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the FrequencyBinCount, as defined earlier on), then define an x variable to define the position to move to for drawing each segment of the line.</p>
+<p>캔버스 너비를 (앞서 정의된 바와 같이 FrequencyBinCount와 동일한) 배열 길이로 나눔으로써 그려질 선의 각 부분의 너비를 결정하고, 선의 각 부분을 그리기 위해 이동할 위치를 정의하기 위해 x 변수를 정의합니다.</p>
 
 <pre class="brush: js">var sliceWidth = WIDTH * 1.0 / bufferLength;
 var x = 0;</pre>
 
-<p>Now we run through a loop, defining the position of a small segment of the wave for each point in the buffer at a certain height based on the data point value form the array, then moving the line across to the place where the next wave segment should be drawn:</p>
+<p>이제 배열로부터의 데이터 포인트 값에 기반한 특정한 높이에서의 버퍼의 각 부분에 대해 파동의 작은 부분의 위치를 정의하고, 다음 파동 부분이 그려질 지점까지 선을 이동하는 반복문을 실행합니다.</p>
 
 <pre class="brush: js">      for(var i = 0; i &lt; bufferLength; i++) {
 
@@ -117,25 +117,25 @@ var x = 0;</pre>
         x += sliceWidth;
       }</pre>
 
-<p>Finally, we finish the line in the middle of the right hand side of the canvas, then draw the stroke we've defined:</p>
+<p>마지막으로, 우리는 캔버스의 우측 중앙에서 선을 끝내고, 우리가 정의한 획을 그립니다:</p>
 
 <pre class="brush: js">      canvasCtx.lineTo(canvas.width, canvas.height/2);
       canvasCtx.stroke();
     };</pre>
 
-<p>At the end of this section of code, we invoke the <code>draw()</code> function to start off the whole process:</p>
+<p>코드의 이 섹션의 마지막에서, 우리는 전체 과정을 시작하기 위해 <code>draw()</code> 함수를 호출합니다:</p>
 
 <pre class="brush: js">    draw();</pre>
 
-<p>This gives us a nice waveform display that updates several times a second:</p>
+<p>이것은 초당 수 차례 갱신되는 멋진 파형 디스플레이를 보여줍니다:</p>
 
-<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="wave.png"></p>
+<p><img alt="오디오 신호의 파형을 보여주는 검은색 오실로스코프 선" src="wave.png"></p>
 
-<h2 id="Creating_a_frequency_bar_graph">Creating a frequency bar graph</h2>
+<h2 id="Creating_a_frequency_bar_graph">주파수 막대 그래프 생성하기</h2>
 
-<p>Another nice little sound visualization to create is one of those Winamp-style frequency bar graphs. We have one available in Voice-change-O-matic; let's look at how it's done.</p>
+<p>제작할 또 다른 멋진 작은 사운드 시각화는 Winamp 스타일의 주파수 막대 그래프 중 하나입니다. 우리는 Voice-change-O-matic에서 이용 가능한 하나를 가지고 있습니다; 어떻게 이것이 완성되었는지를 살펴봅시다.</p>
 
-<p>First, we again set up our analyser and data array, then clear the current canvas display with <code>clearRect()</code>. The only difference from before is that we have set the fft size to be much smaller; this is so that each bar in the graph is big enough to actually look like a bar rather than a thin strand.</p>
+<p>우선, 우리는 analyser와 데이터 배열을 다시 준비하고, <code>clearRect()</code>로 현재 캔버스 디스플레이를 지웁니다. 이전과 다른 유일한 점은 fft 사이즈를 더욱 작게 설정했다는 것입니다. 이것은 그래프에서 각각의 바가 얇은 가닥보다는 실제로 막대기처럼 보이기에 충분히 크도록 하기 위함입니다.</p>
 
 <pre class="brush: js">analyser.fftSize = 256;
 var bufferLength = analyser.frequencyBinCount;
@@ -144,7 +144,7 @@ var dataArray = new Uint8Array(bufferLength);
 
 canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
 
-<p>Next, we start our <code>draw()</code> function off, again setting up a loop with <code>requestAnimationFrame()</code> so that the displayed data keeps updating, and clearing the display with each animation frame.</p>
+<p>다음으로, 우리는 표시된 데이터가 계속 업데이트되도록 <code>requestAnimationFrame()</code>으로 반복을 다시 설정하고, 각 애니메이션 프레임의 디스플레이를 지우며, <code>draw()</code> 함수를 시작시킵니다.</p>
 
 <pre class="brush: js">    function draw() {
       drawVisual = requestAnimationFrame(draw);
@@ -154,17 +154,17 @@ canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
       canvasCtx.fillStyle = 'rgb(0, 0, 0)';
       canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
 
-<p>Now we set our <code>barWidth</code> to be equal to the canvas width divided by the number of bars (the buffer length). However, we are also multiplying that width by 2.5, because most of the frequencies will come back as having no audio in them, as most of the sounds we hear every day are in a certain lower frequency range. We don't want to display loads of empty bars, therefore we shift the ones that will display regularly at a noticeable height across so they fill the canvas display.</p>
+<p>이제 우리는 <code>barWidth</code>를 막대기의 수 (버퍼 길이)로 나눠진 캔버스의 폭과 동일하게 설정합니다. 그러나, 우리는 또한 그 폭에 2.5를 곱하는데, 왜냐하면 우리가 매일 듣는 소리들의 대부분은 특정한 낮은 주파수 범위에 있으므로 대부분의 주파수들은 어떤 오디오도 가지고 있지 않은 채로 되돌아오기 때문입니다. 우리는 수많은 비어있는 막대기들을 표시하기 원하지 않으므로, 우리는 뚜렷한 높이에 자주 표시될 막대기들을 옮겨 그것들이 캔버스 디스플레이를 채우도록 합니다.</p>
 
-<p>We also set a <code>barHeight</code> variable, and an <code>x</code> variable to record how far across the screen to draw the current bar.</p>
+<p>우리는 또한 <code>barHeight</code> 변수와, 현재 막대기를 그리기 위해 스크린이 얼마나 멀리 가로질러 떨어져 있는지를 기록하기 위해 <code>x</code> 변수를 설정합니다.</p>
 
 <pre class="brush: js">var barWidth = (WIDTH / bufferLength) * 2.5;
 var barHeight;
 var x = 0;</pre>
 
-<p>As before, we now start a for loop and cycle through each value in the <code>dataArray</code>. For each one, we make the <code>barHeight</code> equal to the array value, set a fill color based on the <code>barHeight</code> (taller bars are brighter), and draw a bar at <code>x</code> pixels across the canvas, which is <code>barWidth</code> wide and <code>barHeight/2</code> tall (we eventually decided to cut each bar in half so they would all fit on the canvas better.)</p>
+<p>이전과 같이, 우리는 이제 for 반복문을 시작해 <code>dataArray</code>의 각 값을 순회합니다. 각 값에 대해, 우리는 <code>barHeight</code>를 배열 값과 같게 만들고, 채울 색깔을 <code>barHeight</code>에 기반해 설정하고 (높을수록 밝습니다), 막대기를 캔버스를 <code>x</code> 픽셀 가로지른 곳에 그리는데, 이는 폭이 <code>barWidth</code>이고 높이는 <code>barHeight/2</code>입니다. (우리는 결국 막대기들이 캔버스에 더 잘 맞도록 각 막대기들을 반절로 자르기로 결정했습니다)</p>
 
-<p>The one value that needs explaining is the vertical offset position we are drawing each bar at: <code>HEIGHT-barHeight/2</code>. I am doing this because I want each bar to stick up from the bottom of the canvas, not down from the top, as it would if we set the vertical position to 0. Therefore, we instead set the vertical position each time to the height of the canvas minus <code>barHeight/2</code>, so therefore each bar will be drawn from partway down the canvas, down to the bottom.</p>
+<p>설명을 필요로 하는 하나의 값은 우리가 각 막대기를 그리는 수직 오프셋 위치인 <code>HEIGHT-barHeight/2</code>입니다. 제가 이것을 한 이유는, 만약 우리가 수직 위치를 0으로 설정했다면 각 막대기가 캔버스의 위에서부터 아래로 튀어나왔을 텐데, 제가 원한 것은 이게 아니라 막대기들이 아래에서부터 위로 튀어나오기를 원했기 때문입니다. 그러므로, 우리는 대신 매번 수직 위치를 캔버스의 높이 마이너스 <code>barHeight/2</code>를 하여, 각 막대기가 캔버스의 아래 도중에서부터, 아래에서 캔버스의 밑을 향해 그려질 것입니다.</p>
 
 <pre class="brush: js">      for(var i = 0; i &lt; bufferLength; i++) {
         barHeight = dataArray[i]/2;
@@ -176,14 +176,14 @@ var x = 0;</pre>
       }
     };</pre>
 
-<p>Again, at the end of the code we invoke the draw() function to set the whole process in motion.</p>
+<p>다시, 코드의 마지막에서 우리는 전체 과정을 움직이게 만들기 위해 draw() 함수를 호출합니다.</p>
 
 <pre class="brush: js">draw();</pre>
 
-<p>This code gives us a result like the following:</p>
+<p>이 코드는 다음과 같은 결과를 보여줍니다:</p>
 
-<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="bar-graph.png"></p>
+<p><img alt="오디오 신호의 각각 다른 주파수들의 강도를 보여주는 막대 그래프의 일련의 붉은 색 막대들" src="bar-graph.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: The examples listed in this article have shown usage of {{ domxref("AnalyserNode.getByteFrequencyData()") }} and {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. For working examples showing {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, refer to our <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> demo (see the <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> too) — this is exactly the same as the original <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>, except that it uses Float data, not unsigned byte data.</p>
+<p><strong>참고</strong>: 이 글에서 언급된 예제들은 {{ domxref("AnalyserNode.getByteFrequencyData()") }} 와 {{ domxref("AnalyserNode.getByteTimeDomainData()") }}의 사용을 보여주었습니다. {{ domxref("AnalyserNode.getFloatFrequencyData()") }} 와 {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}를 보여주는 작동 예제에 대해서는, <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> 도 확인할 수 있습니다) 를 참고하세요 — 이것은 unsigned 바이트 데이터가 아니라, Float 데이터를 사용한다는 것을 제외하면, 이것은 정확히 원래 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>와 똑같습니다.</p>
 </div>