recursal/MDN huggingface dataset:
SVGGraphicsElement.getBBox()
============================

**`SVGGraphicsElement.getBBox()`** 메서드는 객체가 들어가는 가장 작은 직사각형의 좌표를 알아냅니다. 반환되는 좌표는 (목표 요소에 포함된 모든 요소의 모든 기하 특성의 적용 이후의) 현재 SVG 공간에 관련되어 있습니다.

**참고:** `getBBox()` 는 요소가 아직 렌더링되지 않은 경우일지라도
 반드시 메서드가 호출된 시점에서의 실제 바운딩 박스를 반환해야 합니다.
 이 메서드는 또한 요소나 부모 요소에 적용된 어떠한 변형도 고려하지 않습니다.



**참고:** `getBBox` 는 `getBoundingClientRect()`와
 다른 값을 반환하는데, `getBoundingClientRect()`는
 뷰포트에 관련된 값을 반환합니다.


구문
--


```js
let bboxRect = object.getBBox();
```

### 매개변수

`Options` 
Experimental
 Optional

요소의 어떤 부분들이 바운딩 박스에 포함되는지를 제어하는 데 쓰이는 옵션 dictionary. 가능한 옵션은 아래와 같습니다.

`fill`

fill이 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `true` 입니다.

`stroke`

stroke가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.

`markers`

markers가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.

`clipped`

바운딩 박스가 클리핑되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.


### 반환 값

반환 값은 `SVGRect` 객체인데, 이 객체는 바운딩 박스를 정의합니다. 이 값은 요소 혹은 부모 요소에 적용된 어떠한 변형 특성과도 관계없습니다.

예제
--

### HTML


```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <g id="group\_text\_1">
    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
      Hello World Again!
    </text>
  </g>
  <!-- 녹색으로 BBox를 보여줍니다 -->
  <rect id="rect\_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
  <!-- 적색으로 BoundingClientRect를 보여줍니다 -->
  <rect id="rect\_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>
```

### JavaScript


```js
var rectBBox = document.querySelector("#rect\_1");
var rectBoundingClientRect = document.querySelector("#rect\_2");
var groupElement = document.querySelector("#group\_text\_1");

var bboxGroup = groupElement.getBBox();
rectBBox.setAttribute("x", bboxGroup.x);
rectBBox.setAttribute("y", bboxGroup.y);
rectBBox.setAttribute("width", bboxGroup.width);
rectBBox.setAttribute("height", bboxGroup.height);

var boundingClientRectGroup = groupElement.getBoundingClientRect();
rectBoundingClientRect.setAttribute("x", boundingClientRectGroup.x);
rectBoundingClientRect.setAttribute("y", boundingClientRectGroup.y);
rectBoundingClientRect.setAttribute("width", boundingClientRectGroup.width);
rectBoundingClientRect.setAttribute("height", boundingClientRectGroup.height);
```

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGraphicsElement\_\_getBBox |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* SVG Primer 내의 getBBox
FormData.set()
==============

`FormData` 인터페이스의 **`set()`** 메서드는 `FormData` 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 key/value을 추가합니다.

`set()` 과 `FormData.append` 의 차이점은 지정된 키가 이미 존재할 경우에, `set()` 은 모든 기존 값들을 새로운 값으로 덮어쓰기하는 반면, `FormData.append` 는 기존 값의 끝에 새 값을 추가합니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------

이 메서드에는 두 가지 버전이 있습니다: 매개변수가 두 개인 버전과 세 개인 버전입니다:


```js
formData.set(name, value);
formData.set(name, value, filename);
```

### Parameters

`name`

`value` 에 포함되는 데이터 필드의 이름입니다.

`value`

필드의 값입니다. 파라미터가 두 개인 버전에서는 `USVString`이고, 그렇지 않은 경우 문자열로 변환됩니다. 파라미터가 세 개인 버전에서는 `Blob`, `File`, `USVString`이 될 수 있습니다. 이들 중 어느것도 지정되지 않으면 값은 문자열로 변환됩니다.

`filename` Optional

`Blob` 또는 `File` 이 두 번째 매개 변수로 전달될 때, 서버에 리포트하는 파일 이름(a `USVString`)입니다. `Blob` 객체의 기본 파일 이름은 "blob"입니다.


**참고:** `Blob` 을 `FormData` 객체에 추가할 데이터로 지정하면, "Content-Disposition" 헤더에서 서버에 리포트하는 파일 이름이 브라우저마다 다를 수 있습니다.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData(); // Currently empty
```


`FormData.set`를 사용하여 key/value 쌍을 추가할 수 있습니다::


```js
formData.set("username", "Chris");
formData.set("userpic", myFileInput.files[0], "chris.jpg");
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-set |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.getAll()
=================

`FormData` 인터페이스의 **`getAll()`** 메서드는 `FormData` 객체에서 지정된 키와 연관된 모든 값을 반환합니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.getAll(name);
```

### Parameters

`name`

검색하고 싶은 키의 이름을 나타내는 `USVString` 입니다.

### Returns

`FormDataEntryValue` (en-US)의 배열입니다.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData();
```


`FormData.append`를 사용하여 `username` 에 두 개의 값을 추가합니다:


```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```


`getAll()` 함수는 `username` 의 값들을 배열로 반환합니다:


```js
formData.getAll("username"); // Returns ["Chris", "Bob"]
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-getall |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.values()
=================

**`FormData.values()`** 메서드는 이 객체에 포함 된 모든 value를 통과하는 `iterator`를 반환합니다. value는 `USVString` 또는 `Blob` 객체입니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.values();
```

### Return value

`iterator`를 반환합니다.

Example
-------


```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the values
for (var value of formData.values()) {
  console.log(value);
}
```


결과는 다음과 같습니다:
```

value1
value2
```

명세서
---

#### No specification found

No specification data found for `api.FormData.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.append()
=================

`FormData` 인터페이스의 **`append()`** 메서드는 `FormData` 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가합니다.

`FormData.set` 과 `append()` 의 차이점은 지정된 키가 이미 있으면, `FormData.set` 은 모든 기존 값을 새 값으로 덮어쓰기를 합니다. 반면 `append()` 는 기존 값 집합의 끝에 새로운 값을 추가합니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------

이 메서드에는 두 가지 버전이 있습니다: 매개변수가 두 개인 버전과 세 개인 버전입니다:


```js
formData.append(name, value);
formData.append(name, value, filename);
```

### Parameters

`name`

`value` 에 포함되는 데이터 필드의 이름입니다.

`value`

필드의 값입니다. `USVString` 또는 `Blob` (`File`과 같은 sublcass를 포함하여) 일 수 있습니다.

`filename` Optional

`Blob` 또는 `File` 이 두 번째 매개 변수로 전달될 때, 서버에 리포트하는 파일 이름(a `USVString`)입니다. `Blob` 객체의 기본 파일 이름은 "blob" 입니다. `File` 객체의 기본 파일 이름은 파일의 이름이 됩니다.


**참고:** `Blob` 을 `FormData` 객체에 추가할 데이터로 지정하면, "Content-Disposition" 헤더에서 서버에 리포트하는 파일 이름이 브라우저마다 다를 수 있습니다.

### Returns

Void.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData(); // Currently empty
```


`FormData.append`를 사용하여 key/value 쌍을 추가할 수 있습니다:


```js
formData.append("username", "Chris");
formData.append("userpic", myFileInput.files[0], "chris.jpg");
```


일반 form 데이터와 마찬가지로 동일한 이름의 여러 값을 추가할 수 있습니다. 예를들면 (그리고 이름에 []를 추가하여 PHP의 명명 규칙과 호환이 가능합니다):


```js
formData.append("userpic[]", myFileInput.files[0], "chris1.jpg");
formData.append("userpic[]", myFileInput.files[1], "chris2.jpg");
```


이 기술을 사용하면 서버에 올라간 결과 데이터가 루프를 도는데 도움이 되는 구조이기 때문에, 이 기술을 사용하면 다중 -파일 업로드를 보다 쉽게 처리할 수 있습니다.

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-append |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.delete()
=================

`FormData` 인터페이스의 **`delete()`** 메서드는 `FormData` 객체에서 key와 그 값에 해당하는 것을 지웁니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.delete(name);
```

### Parameters

`name`

삭제할 key의 이름 입니다.

### Returns

Void.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만들고, form의 key/value 쌍을 미리 채웁니다:


```js
var formData = new FormData(myForm);
```


`delete()`를 사용하여 키와 값을 삭제할 수 있습니다:


```js
formData.delete("username");
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData()
==========

**`FormData()`** 생성자(Constructor)는 새로운 `FormData`객체를 만듭니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
var formData = new FormData(form);
```

### Parameters

`form` Optional

HTML `<form>` 요소 — 지정된 경우 `FormData` 객체는 form의 현재 key/value 들로 채워집니다. key/value는 submit한 각 요소의 name property와 value를 사용합니다. 또한 파일 입력 내용을 인코딩합니다.

Example
-------

다음 코드는 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData(); // Currently empty
```


`FormData.append`을 사용하여 key/value 쌍을 추가할 수 있습니다:


```js
formData.append("username", "Chris");
```


또는 `FormData` 객체를 만들 때 선택적으로 `form` argument를 지정할 수 있는데, 지정된 양식대로 value를 미리 채우는 것입니다:


```html
<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" />
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile" />
  </div>
  <input type="submit" value="Submit!" />
</form>
```


**참고:** 모든 입력 요소는 'name' 속성(attribute) 을 갖고 있습니다. 나중에 value에 접근하는데 필요합니다.


```js
var myForm = document.getElementById("myForm");
formData = new FormData(myForm);
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.keys()
===============

**`FormData.keys()`** 메서드는 이 객체에 포함된 모든 키를 통과하는 `iterator` 를 반환합니다. 키는 `USVString` 객체입니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.keys();
```

### Return value

`iterator`를 반환합니다.

Example
-------


```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the keys
for (var key of formData.keys()) {
  console.log(key);
}
```


결과는 다음과 같습니다:
```

key1
key2
```

명세서
---

#### No specification found

No specification data found for `api.FormData.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.get()
==============

`FormData` 인터페이스의 **`get()`** 메서드는 `FormData` 객체에서 지정한 키와 연관된 첫 번째 값을 반환합니다. 값이 여러개이고, 모든 값을 원하면 이 메서드 대신 `getAll()` 메서드를 사용하십시오.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.get(name);
```

### Parameters

`name`

검색하고 싶은 키의 이름을 나타내는 `USVString` 입니다.

### Return value

값을 포함하는 `FormDataEntryValue` (en-US) 입니다.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData();
```


`FormData.append`를 사용하여 `username` 에 두 개의 값을 추가합니다:


```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```


`get()` 함수를 사용하면 `username` 의 첫 번째 value만 반환합니다:


```js
formData.get("username"); // Returns "Chris"
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.entries()
==================

**`FormData.entries()`** 메서드는 이 객체에 포함된 모든 key/value 쌍을 통과하는 `iterator` 를 반환합니다. 각 쌍의 key는 `USVString` 객체입니다; value는 `USVString` 또는 `Blob` 중 하나입니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.entries();
```

### Return value

`iterator`를 리턴합니다.

Example
-------


```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the key/value pairs
for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}
```


결과는 다음과 같습니다:
```

key1, value1
key2, value2
```

명세서
---

#### No specification found

No specification data found for `api.FormData.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
FormData.has()
==============

`FormData` 인터페이스의 **`has()`** 메서드는 `FormData` 객체에 특정 키가 들어 있는지 여부를 나타내는 boolean 을 반환합니다.

**참고:** 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax
------


```js
formData.has(name);
```

### Parameters

`name`

테스트 하려는 키의 이름을 나타내는 `USVString` 입니다.

### Returns

`Boolean`.

Example
-------

다음 코드를 따라 빈 `FormData` 객체를 만듭니다:


```js
var formData = new FormData();
```


다음 스니펫(코드 조각)은 `FormData` 객체안에 `username` 이 존재하는지 테스트한 결과와, `FormData.append`를 사용하여 `username` 에 값을 추가한 이후의 결과를 보여줍니다 :


```js
formData.has("username"); // Returns false
formData.append("username", "Chris");
formData.has("username"); // Returns true
```

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
AnalyserNode.getByteFrequencyData()
===================================

`AnalyserNode` 인터페이스의 **`getByteFrequencyData()`** 메서드는 전달된 `Uint8Array` (en-US) (unsigned byte array) 내로 현재 주파수 데이터를 복사합니다.

주파수 데이터는 0에서 255 스케일의 정수로 구성되어 있습니다.

배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, `48000` 샘플 레이트에 대해서, 배열의 마지막 원소는 `24000` Hz에 대한 데시벨 값을 나타냅니다.

만약 배열이 `AnalyserNode.frequencyBinCount`보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.

구문
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array는 frequencyBinCount와 같은 길이여야만 합니다

void analyser.getByteFrequencyData(dataArray); // getByteFrequencyData()로부터 반환된 데이터로 Uint8Array를 채웁니다
```

### 매개변수

`array`

 주파수 영역 데이터가 복사될 `Uint8Array` (en-US). 소리가 없는 모든 샘플에 대해서, 값은 `-Infinity`입니다.
 만약 배열이 `AnalyserNode.frequencyBinCount`보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.


### 반환 값

없음.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```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 < 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();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode.getByteTimeDomainData()
====================================

`AnalyserNode` 인터페이스의 **`getByteTimeDomainData()`** 메서드는 전달된 `Uint8Array` (en-US) (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

만약 배열이 `AnalyserNode.fftSize`보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.

구문
--


```js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
const dataArray = new Uint8Array(analyser.fftSize); // Uint8Array는 fftSize와 같은 길이여야만 합니다
analyser.getByteTimeDomainData(dataArray); // getByteTimeDomainData()로부터 반환된 데이터로 Uint8Array를 채웁니다
```

### 매개변수

`array`

 시간 영역 데이터가 복사될 `Uint8Array` (en-US).
 만약 배열이 `AnalyserNode.fftSize`보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.


### 반환 값

**`void`** | 없음

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```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 < 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();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytetimedomaindata |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode.smoothingTimeConstant
==================================

`AnalyserNode` 인터페이스의 **`smoothingTimeConstant`** 속성은 마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다. 이것은 기본적으로 현재 버퍼와 `AnalyserNode`가 처리한 마지막 버퍼 사이의 평균이고, 더욱 매끄러운 시간에 대한 값 변화의 집합을 결과로 낳습니다.

구문
--


```js
var smoothValue = analyserNode.smoothingTimeConstant;
analyserNode.smoothingTimeConstant = newValue;
```

### 값

`0`에서 `1`까지의 범위 내의 double (`0`은 시간 에버리징이 없음을 의미). 기본값은 `0.8`입니다.

만약 0이 설정된다면, 완료된 에버리징이 없는 것이지만, 1의 값은 "값을 계산하는 동안 이전과 현재 버퍼를 많이 겹치기"를 의미하는데, 이는 근본적으로 `AnalyserNode.getFloatFrequencyData`/`AnalyserNode.getByteFrequencyData` 호출에 걸쳐 변화들을 매끄럽게 합니다.

기술적인 측면에서, 우리는 Blackman window를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.

**참고:** 만약 범위 0-1 바깥의 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).

만약 여러분이 `smoothingTimeConstant()`이 가진 영향에 대해 궁금하다면, 위의 예제를 복사해서 `analyser.smoothingTimeConstant = 0;`을 대신 설정해 보세요. 값 변화가 더욱 삐걱거리는 것을 인지하실 것입니다.


```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 < 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();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-smoothingtimeconstant |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode.maxDecibels
========================

`AnalyserNode` 인터페이스의 **`maxDecibels`** 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.

구문
--


```js
var curValue = analyserNode.maxDecibels;
analyserNode.maxDecibels = newValue;
```

### 값

FFT 분석 데이터를 스케일링하는 것에 대한 최대 데시벨 값을 나타내는 double인데, `0` dB는 가능한 가장 큰 소리를 나타내고, `-10` dB는 그것의 10번째, 등등입니다. 기본 값은 `-30` dB입니다.

`getByteFrequencyData()`로부터 데이터를 얻을 때, `maxDecibels` 또는 더 높은 진폭을 가진 모든 주파수는 `255`로 반환됩니다.

**참고:** 만약 `AnalyserNode.minDecibels`보다 더 작거나 같은 값이 설정된다면, `IndexSizeError` 예외가 발생합니다.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```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 < 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();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-maxdecibels |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기