Using fullscreen mode - Web API

Using fullscreen mode
=====================

**Fullscreen API** 는 특정 요소`Element` (en-US)(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.

API 사용 방법에 대한 자세한 내용은 Guide to the Fullscreen API (en-US) 문서를 참조하세요.

**참고:** **주의:** 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 Browser compatibility 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, Fscreen 과 같은 라이브러리를 사용할 수 있습니다.

Interfaces
----------

*Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다.*

Methods
-------

Fullscreen API 는 `Document`, `Element` (en-US) 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.

### Methods on the Document interface

`Document.exitFullscreen()` (en-US)

user agent 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 `Promise` resolved 를 반환합니다.

### Methods on the Element interface

`Element.requestFullscreen()` (en-US)

유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 `Promise` resolved를 반환합니다.

Properties
----------

*`Document` 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.*

`DocumentOrShadowRoot.fullscreenElement` (en-US)

`fullscreenElement` 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소`Element` (en-US)를 알려줍니다. 이것이 `null`인 경우, document는 full-screen mode가 아닙니다.

`Document.fullscreenEnabled` (en-US)

`fullscreenEnabled` 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, `"fullscreen"` 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 `false` 입니다.

### Event handlers

*Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 `Document` 와`Element` (en-US) 인터페이스 에서 사용할 수 있습니다.*

**참고:** **주의:** 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 `fullscreenchange (en-US)` 및 `fullscreenerror (en-US)` 이벤트를 지정할 수 없습니다. JavaScript 코드로 추가해야만 합니다.

#### Event handlers on documents

`Document.onfullscreenchange` (en-US)

문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 `Document`로 보내지는 `fullscreenchange (en-US)` 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.

`Document.onfullscreenerror` (en-US)

전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, `Document`로 보내지는 `fullscreenerror (en-US)` 이벤트의 이벤트 핸들러입니다.

#### Event handlers on elements

`Element.onfullscreenchange` (en-US)

`fullscreenchange (en-US)` 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.

`Element.onfullscreenerror` (en-US)

full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 `fullscreenerror (en-US)` 이벤트의 이벤트 핸들러입니다.

### Obsolete properties

`Document.fullscreen` (en-US)
지원이 중단되었습니다

문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 `true`, 그렇지 않으면 `false`의 Boolean 값입니다.> **참고:** **주의:** 대신에 `Document` 나 `ShadowRoot` (en-US) 에서 `fullscreenElement` (en-US) 속성(property)을 사용하세요. 그것이 `null`이 아닌 경우 `Element` (en-US)가 full-screen mode로 표시됩니다.

Events
------

*Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.*

`fullscreenchange (en-US)`

full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 `Document` 혹은`Element` (en-US) 로 보냅니다.

`fullscreenerror (en-US)`

full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 `Document` 또는 `Element` 로 보냅니다.

Dictionaries
------------

`FullscreenOptions` (en-US)

`requestFullscreen()` (en-US)을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.

Controlling access
------------------

Feature Policy (en-US)을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 `"fullscreen"`으로 식별되고, 기본 허용 목록 값은 `"self"` 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.

기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 Using Feature Policy을 참조하세요.

Usage notes
-----------

사용자는 `ESC` (혹은 `F11`) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.

**참고:** **주의:** 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 `Alt`-`Tab`)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.

Example
-------

이 예제에서는 비디오가 웹 페이지에 표시됩니다. `Return` 또는 `Enter` 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.

View Live Examples

### Watching for the Enter key

페이지가 로드되면, 이 코드가 실행되어 `Enter` 키 를 주시하는 이벤트 리스너를 설정합니다.

```js
document.addEventListener(
  "keypress",
  function (e) {
    if (e.keyCode === 13) {
      toggleFullScreen();
    }
  },
  false,
);
```

### Toggling full-screen mode

이 코드는 사용자가 `Enter` 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.

```js
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}
```

먼저 `document`의 `fullscreenElement` 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, `mozFullscreenElement`, `msFullscreenElement`, `webkitFullscreenElement`)을 확인해야 합니다. 값이 `null`인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, `<video>`요소에서 `Element.requestFullscreen()` (en-US)을 호출하여 수행합니다.

full-screen mode가 이미 활성화 된 경우(`fullscreenElement` 가 `null`이 아닌 경우), `document`에서 `exitFullscreen()` (en-US)을 호출하여 full-screen mode를 종료합니다.

명세서
---

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenelement① |
| Fullscreen API Standard # ref-for-dom-document-fullscreenenabled① |
| Fullscreen API Standard # ref-for-dom-document-exitfullscreen① |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |
| Fullscreen API Standard # dom-document-fullscreen |

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

### api.Document.fullscreenElement

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

### api.Document.fullscreenEnabled

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

### api.Document.exitFullscreen

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

### api.Element.requestFullscreen

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

### api.Document.fullscreen

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

See also
--------

* Using full-screen mode
* `Element.requestFullscreen()` (en-US)
* `Document.exitFullscreen()` (en-US)
* `Document.fullscreen` (en-US)
* `Document.fullscreenElement` (en-US)
* `:fullscreen`, `::backdrop` (en-US)
* `allowfullscreen` (en-US)


WebRTC API - Web API

WebRTC API
==========

**WebRTC**(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 합니다.

이를 위하여 WebRTC는 상호 연관된 API와 프로토콜로 구성되어 함께 작동합니다. 이 문서에서는 WebRTC의 기본을 이해하고, 설정하며, 데이터와 미디어 연결을 위해 사용할 수 있게 도와줄 것입니다.

상호 운용성
------

WebRTC의 구현이 계속 진화하고 있으며 각 브라우저마다 다른 코덱 및 기타 미디어 기능에 대한 지원 수준이 다르기 때문에, 코드 작성을 시작하기 전에 Google에서 제공하는 Adapter.js 라이브러리를 사용하는 것을 강력하게 고려해보아야합니다.

Adapter.js는 shim 및 polyfill을 사용하여 다양한 플랫폼에서 WebRTC 구현 간의 다양한 차이점을 없애줍니다. 또한 WebRTC 개발 프로세스를 전체적으로 쉽게 수행 할 수 있도록 접두사와 다른 이름 지정의 차이점을 처리하며보다 광범위하게 호환되는 결과를 제공합니다. 라이브러리는 NPM 패키지로도 제공됩니다.

Adapter.js에 대한 자세한 내용은 Improving compatibility using WebRTC adapter.js를 참조하십시오.

WebRTC 개념 및 사용법
---------------

WebRTC는 여러가지 목적으로 사용될 수 있으며, Media Capture and Streams API 와 상당히 많은 부분이 겹친다. 이 둘은 서로 상호작용을 하면서 웹에 강력한 멀티미디어 기능을 제공한다. 예를들어 음성, 화상 회의, 파일 교환, ~~계정 관리~~, ~~DTMF 시그널을 이용해 legacy telephone 시스템 interfacing~~ 등이 있다. 피어들 간의 커넥션이 만들어지는데 어떤 드라이버나 플러그인도 필요하지 않는다. ~~그리고 가끔은 중개 서버 없이도 만들어질 수 있다.~~

두 피어 간의 커넥션은 `RTCPeerConnection` (en-US)인터페이스를 통해 이루어진다. 커넥션이 이루어지고 열리면, 미디어 스트림들 (`MediaStream`) 과 데이터 채널(`RTCDataChannel`)들을 커넥션에 연결할 수 있다.

미디어 스트림들은 미디어 정보를 가지는 다수의 트랙들로 구성될 수 있다. `MediaStreamTrack`인터페이스 object를 베이스로 하는 트랙은 음성, 영상 및 텍스트(제목 또는 챕터 이름 조차도 포함 가능하다)를 포함하는 다양한 미디어 데이터의 타입 중 하나를 포함 할 수 있다. 대부분의 스트림들은 적어도 한 개 이상의 음성(영상) 트랙으로 구성되어 있고, live 미디어(웹 캠 등)나 저장된(스트리밍) 미디어들을 전송하고 받을 수 있다.

또한, 임의의 바이너리 데이터(이미지든 텍스트든 파일이든 모두 가능하다는 뜻)를 `RTCDataChannel` (en-US)인터페이스를 통해 피어들 간에 교환할 수 있다. 이것은 ~~back-channel 정보들~~, 메타데이터 교환, 게임 status 패킷들, 파일 교환, ~~데이터 교환을 위한 primary channel~~ 등에 쓰일 수 있다.

***더 자세한 내용은 밑에 guide와 tutorial을 참조하길 바란다***

WebRTC 인터페이스
------------

WebRTC는 다양한 작업을 수행하기 위해 함께 동작하는 인터페이스를 제공하기때문에 아래 목록의 인터페이스들을 카테고리별로 나누었다. 알파벳 순으로 정리된 목록은 사이드 바를 참조하라.

### 연결 설정 및 관리

이 인터페이스들을 사용하여 WebRTC 연결을 설정할 수 있고, 연결을 맺을 수 있으며 WebRTC 연결을 관리할 수 있다.

`RTCPeerConnection` (en-US)

로컬 컴퓨터와 원격 피어 간의 WebRTC 연결을 나타낸다. 두 피어 간의 효율적인 데이터 스트리밍을 처리하는데 사용된다.

`RTCDataChannel` (en-US)

연결된 두 피어간의 양방향 데이터 채널을 나타낸다.

`RTCDataChannelEvent`

`RTCDataChannel` (en-US)을 `RTCPeerConnection` (en-US)에 연결하는 동안 발생하는 이벤트를 나타낸다. 이 인터페이스와 함께 전송되는 유일한 이벤트는 `datachannel`이다.

`RTCSessionDescription` (en-US)

세션의 매개 변수를 나타냅니다. 각 `RTCSessionDescription`는 세션의 SDP 기술자(descriptor)의 기술 제안 / 응답 협상 과정의 일부를 나타내는 설명 `type`으로 구성되어 있습니다.

`RTCStatsReport` (en-US)

연결 또는 연결의 개별 트랙에 대한 통계를 자세히 설명하는 정보를 제공합니다. `RTCPeerConnection.getStats()` (en-US)를 호출하여 보고서를 얻을 수 있습니다.

`RTCIceCandidate`

`RTCPeerConnection` (en-US) 설정을 위한 후보 인터넷 연결 설정 (ICE; internet connectivity establishment) 서버를 나타냅니다.

`RTCIceTransport` (en-US)

인터넷 연결 설정 (ICE) 전송에 대한 정보를 나타냅니다.

`RTCPeerConnectionIceEvent` (en-US)

대상이있는 ICE 후보와 관련하여 발생하는 이벤트 (일반적으로 `RTCPeerConnection` (en-US))를 나타냅니다. `icecandidate` 유형의 이벤트 만 있습니다.

`RTCRtpSender` (en-US)

`RTCPeerConnection` (en-US)에서 `MediaStreamTrack`의 데이터 인코딩 및 전송을 관리합니다.

`RTCRtpReceiver` (en-US)

`RTCPeerConnection` (en-US)에서 `MediaStreamTrack`의 데이터 수신 및 디코딩을 관리합니다.

`RTCTrackEvent` (en-US)

새롭게 수신된 `MediaStreamTrack`이 생성되고 관련 `RTCRtpReceiver` (en-US) 개체가 `RTCPeerConnection` (en-US) 개체에 추가되었음을 나타냅니다.

`RTCSctpTransport` (en-US)

스트림 제어 전송 프로토콜(*Stream Control Transmission Protocol,* **SCTP**) 전송을 설명하는 정보를 제공하고, 모든 `RTCPeerConnection` (en-US) 데이터 채널에 대한 SCTP 패킷이 송수신되는 기본 데이터그램 전송 보안 계층 프로토콜(Datagram Transport Layer Security, **DTLS**) 전송에 접근하기 위한 방법을 제공합니다.

#### Dictionaries

`RTCConfiguration`

`RTCPeerConnection` (en-US) 구성 옵션을 제공하는데 사용됩니다.

`RTCIceServer` (en-US)

Defines how to connect to a single ICE server (such as a STUN or TURN server).

`RTCRtpContributingSource` (en-US)

Contains information about a given contributing source (CSRC) including the most recent time a packet that the source contributed was played out.

#### Types

`RTCSctpTransportState` (en-US)

Indicates the state of an `RTCSctpTransport` (en-US) instance.

`RTCSessionDescriptionCallback`

The RTCSessionDescriptionCallback is passed into the `RTCPeerConnection` (en-US) object when requesting it to create offers or answers.

### 식별자와 보안

WebRTC API에는 보안 및 식별자를 관리하기위한 여러 인터페이스가 포함되어 있습니다.

`RTCIdentityProvider`

사용자 에이전트가 Identity Assertion을 생성 또는 검증을 요청할수 있도록합니다.

`RTCIdentityAssertion` (en-US)

Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns `null`. Once set it can't be changed.

`RTCIdentityProviderRegistrar`

식별자 공급자(idP; identity provider)를 제공합니다.

`RTCIdentityEvent`

Represents an identity assertion generated by an identity provider (idP). This is usually for an `RTCPeerConnection` (en-US). The only event sent with this type is `identityresult`.

`RTCIdentityErrorEvent`

Represents an error associated with the identity provider (idP). This is usually for an `RTCPeerConnection` (en-US). Two events are sent with this type: `idpassertionerror` and `idpvalidationerror`.

`RTCCertificate` (en-US)

Represents a certificate that an `RTCPeerConnection` (en-US) uses to authenticate.

### Telephony

이러한 인터페이스들은 공중 전화망 (PTSN; public-switched telephone networks)과의 상호 작용과 관련이 있습니다

`RTCDTMFSender` (en-US)

Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an `RTCPeerConnection` (en-US).

`RTCDTMFToneChangeEvent` (en-US)

Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).

Guides
------

Introduction to WebRTC protocols

이 문서는 WebRTC API가 구축된 기반이 되는 프로토콜을 소개한다.

WebRTC connectivity (en-US)

WebRTC 커넥션의 작동 방식 및 다양한 프로토콜과 인터페이스를 함께 사용하여 강력한 커뮤니케이션 앱을 만드는 방법에 대한 가이드이다.

Lifetime of a WebRTC session (en-US)

WebRTC는 임의 데이터, 오디오, 비디오 또는 이들의 모든 조합에 대한 피어 투 피어 커뮤니케이션을 브라우저 어플리케이션으로 구축하도록 해준다. 이 문서에서는, 모든 방법으로 커넥션을 설정하는 것에서 부터 더 이상 필요하지 않을 때 커넥션을 닫는 것까지 WebRTC 세션의 수명에 대해 살펴볼 것이다.

Signaling and two-way video calling

여러 사용자들 간의 화상통화를 할 수 있는 Websocket을 기반으로한 튜토리얼 및 예제이다. 채팅 서버의 웹소켓 커넥션은 WebRTC의 시그널링을 위해 사용된다.

Codecs used by WebRTC (en-US)

A guide to the codecs which WebRTC requires browsers to support as well as the optional ones supported by various popular browsers. Included is a guide to help you choose the best codecs for your needs.

Using WebRTC data channels

이 가이드는 두 피어 사이의 임의의 데이터를 교환하기 위해 피어 커넥션와 관련된 `RTCDataChannel` (en-US)을 사용할 수 있는 방법을 다룬다.

Using DTMF with WebRTC (en-US)

구식 전화 시스템에 연결되는 게이트웨이와 상호 작용하기 위한 WebRTC의 지원에는 `RTCDTMFSender` (en-US) 인터페이스를 사용하여 DTMF 톤을 보내는 기능이 포함된다. 이 가이드는 어떻게 그렇게 하는지 보여준다.

Tutorials
---------

Improving compatibility using WebRTC adapter.js

The WebRTC organization provides on GitHub the WebRTC adapter to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.

Taking still photos with WebRTC (en-US)

This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.

A simple RTCDataChannel sample (en-US)

The `RTCDataChannel` (en-US) interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API (en-US), so that the same programming model can be used for each.

Resources
---------

### Protocols

#### WebRTC-proper protocols

* Application Layer Protocol Negotiation for Web Real-Time Communications
* WebRTC Audio Codec and Processing Requirements
* RTCWeb Data Channels
* RTCWeb Data Channel Protocol
* Web Real-Time Communication (WebRTC): Media Transport and Use of RTP
* WebRTC Security Architecture
* Transports for RTCWEB

#### Related supporting protocols

* Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol
* Session Traversal Utilities for NAT (STUN)
* URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol
* Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers
* An Offer/Answer Model with Session Description Protocol (SDP)
* Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization
명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers  |
| Media Capture and Streams  |
| Media Capture from DOM Elements  |

In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under resources.

See also
--------

* `MediaDevices`
* `MediaStreamEvent` (en-US)
* `MediaStreamConstraints` (en-US)
* `MediaStreamTrack`
* `MessageEvent`
* `MediaStream` (en-US)
* Firefox multistream and renegotiation for Jitsi Videobridge
* Peering Through the WebRTC Fog with SocketPeer
* Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics


PointerEvent - Web API

PointerEvent
============

**`PointerEvent`** 인터페이스는 포인터에 의해 발생한 DOM 이벤트의 상태, 즉 접촉점의 위치와 크기, 이벤트를 유발한 장치의 유형, 접촉면에 가해진 압력 등을 나타냅니다.

"포인터"란 화면과 같은 접촉면 상의 한 좌표 또는 좌표들을 조준할 수 있는 입력 장치를 통칭하며 특정 하드웨어로 제한되지 않습니다. 마우스, 펜, 터치 접촉점 등은 모두 포인터 장치입니다.

포인터의 "적중 테스트"는 브라우저가 포인터 이벤트의 대상 요소를 결정하는 과정입니다. 보통 포인터의 위치 외에도 화면 매체 상의 문서에서 요소가 차지하는 시각적 레이아웃도 고려합니다.

Event

UIEvent

MouseEvent

PointerEvent생성자
---

`PointerEvent()` (en-US)

신뢰되지 않는 인공 `PointerEvent`를 생성합니다.

인스턴스 속성
-------

`MouseEvent`와 `Event` 인터페이스의 속성을 상속합니다.

`PointerEvent.pointerId` (en-US) 읽기 전용

이벤트를 유발한 포인터의 고유 식별자입니다.

`PointerEvent.width` (en-US) 읽기 전용

포인터 접촉점의 너비(X축 크기)를 CSS 픽셀 단위로 나타낸 값입니다.

`PointerEvent.height` (en-US) 읽기 전용

포인터 접촉점의 높이(Y축 크기)를 CSS 픽셀 단위로 나타낸 값입니다.

`PointerEvent.pressure` (en-US) 읽기 전용

포인터 입력의 압력을 `0`부터 `1`까지의 범위로 정규화한 값입니다. `0`과 `1`은 각각 포인터 하드웨어가 감지할 수 있는 최소와 최대 압력을 나타냅니다.

`PointerEvent.tangentialPressure` (en-US) 읽기 전용

포인터 입력의 접선 압력(tangential pressure, barrel pressure 또는 cylinder stress)을 `-1`부터 `1`까지의 범위로 정규화한 값입니다. `0`이 컨트롤의 정위치를 나타냅니다.

`PointerEvent.tiltX` (en-US) 읽기 전용

포인터(펜 스타일러스 등)의 주축과 Y축이 이루는 평면과 Y-Z 평면 사이의 각입니다. `-90`도부터 `90`도의 범위를 가집니다.

`PointerEvent.tiltY` (en-US) 읽기 전용

포인터(펜 스타일러스 등)의 주축과 X축이 이루는 평면과 X-Z 평면 사이의 각입니다. `-90`도부터 `90`도의 범위를 가집니다.

`PointerEvent.twist` (en-US) 읽기 전용

포인터(펜 스타일러스 등)의 주축 기준 시계 방향 회전입니다. `0`도부터 `359`도의 범위를 가집니다.

`PointerEvent.pointerType` (en-US) 읽기 전용

이벤트를 유발한 장치 유형(마우스, 펜, 터치 등)을 나타냅니다.

`PointerEvent.isPrimary` (en-US) 읽기 전용

이 포인터가 해당 장치 유형에서의 주 포인터인지 나타냅니다.

인스턴스 메서드
--------

`PointerEvent.getCoalescedEvents()` (en-US)

발송된 `pointermove` (en-US)에 병합된 모든 `PointerEvent` 인스턴스들의 시퀀스를 반환합니다.

`PointerEvent.getPredictedEvents()` (en-US)

발송된 `pointermove` (en-US)에 병합된 이벤트들에 기반해 브라우저가 예측한 다음 `PointerEvent` 인스턴스들의 시퀀스를 반환합니다.

포인터 이벤트 유형
----------

`PointerEvent` 인터페이스에는 여러 이벤트 유형이 있습니다. 어떤 유형인지는 이벤트의 `type` 속성으로 알 수 있습니다.

**참고:** 대부분의 경우, 비 포인터 이벤트 코드도 사용자와 상호작용할 수 있도록 포인터와 마우스 이벤트가 같이 발생한다는 점을 기억해야 합니다. 포인터 이벤트를 사용할 경우, `event.preventDefault()`로 마우스 이벤트의 발생을 막으세요.

`pointerover` (en-US)

포인터가 요소의 적중 테스트 경계 내로 들어오면 발생합니다.

`pointerenter` (en-US)

포인터가 요소 또는 요소 자손의 적중 테스트 경계 내로 들어오면 발생합니다. 호버를 지원하지 않는 장치(`pointerdown`을 참고하세요)에서의 `pointerdown` 이벤트 결과로도 발생합니다. `pointerover`와 유사하지만 이 이벤트는 버블링하지 않습니다.

`pointerdown` (en-US)

포인터가 "활성" 상태가 되면 발생합니다. 마우스에 있어서 활성은 장치의 버튼이 아무것도 눌리지 않은 상태에서 적어도 한 개의 버튼이 눌린 상태로 전환될 때입니다. 터치에서는 디지타이저와 물리적 접촉을 할 때고, 펜에서는 스타일러스가 디지타이저와 물리적 접촉을 할 때입니다.

**참고:** 직접 조작을 지원하는 터치 화면 브라우저에서는 `pointerdown` 이벤트가 암시적인 포인터 포획을 유발하여 이후 발생하는 모든 포인터 이벤트가 대상에게 포획됩니다. 포획된 이벤트들은 포획 대상의 위에서 발생하는 것처럼 취급합니다. 따라서 포획 중에는 `pointerover`, `pointerenter`, `pointerleave`, `pointerout`이 **발생하지 않습니다**. 포인터 포획은 대상 요소의 `element.releasePointerCapture` (en-US)를 직접 호출해서 해제할 수도 있고, `pointerup`이나 `pointercancel` 이벤트가 발생하면 암시적으로 해제됩니다.

`pointermove` (en-US)

포인터가 좌표를 바꾸면 발생합니다.

`pointerrawupdate`
Experimental

포인터의 속성이 바뀌면 발생합니다.

`pointerup` (en-US)

포인터가 더 이상 "활성" 상태가 아니면 발생합니다.

`pointercancel` (en-US)

장치가 비활성화되는 등, 포인터가 더는 이벤트를 생성할 수 없다고 여겨지면 브라우저가 이 이벤트를 발송합니다.

`pointerout` (en-US)

포인터 장치가 요소의 적중 테스트 경계 밖으로 나갔거나, 호버를 지원하지 않는 장치(`pointerup`을 참고하세요)에서 `pointerup` 이벤트가 발생했거나, `pointercancel` 이벤트가 발생했거나(`pointercancel`을 참고하세요), 펜 스타일러스가 디지타이저의 감지 범위 밖으로 나가는 등 여러 이유로 발생합니다.

`pointerleave` (en-US)

포인터 장치가 요소의 적중 테스트 경계 밖으로 나가면 발생합니다. 펜형 장치에서는 스타일러스가 디지타이저의 감지 범위 밖으로 나갈 때도 발생합니다.

`gotpointercapture` (en-US)

요소가 포인터 포획 대상이 되면 발생합니다.

`lostpointercapture` (en-US)

포인터에 대한 포획이 해제되면 발생합니다.

예제
--

각 속성, 이벤트 유형, 전역 이벤트 처리기의 참고서 페이지에서 예제를 확인할 수 있습니다.

명세서
---

| Specification |
| --- |
| Pointer Events # pointerevent-interface |

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

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

같이 보기
-----

* 터치 이벤트 (en-US)
* `GestureEvent` (en-US)
* `touch-action` (en-US)


View Transitions API - Web API

View Transitions API
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**View Transitions API**는 서로 다른 DOM 상태 간에 애니메이션 전환을 쉽게 만들 수 있는 메커니즘을 제공하는 동시에 한 단계로 DOM 콘텐츠를 업데이트할 수 있습니다.

개념 및 사용법
--------

뷰 전환(View Transition)은 사용자의 인지 부하를 줄이고 맥락을 유지하며 애플리케이션의 상태 또는 뷰 간에 이동할 때 인지되는 로딩 지연 시간을 줄이는데 널리 사용되는 디자인 옵션입니다.

하지만 웹에서 뷰 전환을 만드는 것은 지금까지는 어려웠습니다. 단일 페이지 애플리케이션(SPA)에서 상태 간 전환에는 상당한 양의 CSS와 JavaScript를 작성해야 하는 경향이 있었습니다.

* 이전 콘텐츠와 새 콘텐츠의 로딩 및 포지셔닝을 처리합니다.
* 이전 상태와 새 상태에 애니메이션을 적용하여 전환을 만듭니다.
* 이전 콘텐츠와의 우발적인 사용자 상호 작용으로 인해 문제가 발생하지 않도록 합니다.
* 전환이 완료되면 이전 콘텐츠를 제거합니다.

읽기 위치 손실, 초점 혼란, 이상한 라이브 영역 알림 동작과 같은 접근성 문제가 새 콘텐츠와 이전 콘텐츠가 DOM에 한꺼번에 존재할 때 발생할 수 있습니다. 또한, SPA가 아닌 일반 웹사이트 등에서 문서 간 뷰 전환이 불가능합니다.

View Transitions API는 필요한 DOM 변경 및 전환 애니메이션을 훨씬 쉽게 처리할 수 있는 방법을 제공합니다.

**참고:** The View Transitions API는 현재 문서 간 뷰 전환을 지원하지 않지만, 향후 사양에 포함될 예정이며 현재 활발히 작업 중입니다.

### 기본적인 뷰 전환 만들기

예를 들어, SPA에는 탐색 링크가 클릭되거나 서버에서 업데이트가 푸시되는 등의 이벤트에 대한 응답으로 새 콘텐츠를 가져오고 DOM을 업데이트하는 기능이 포함될 수 있습니다. 기본 뷰 전환 데모에서는 클릭한 섬네일을 기반으로 새로운 전체 크기 이미지를 표시하는 `displayNewImage()` 함수로 이 기능을 단순화했습니다. 브라우저에서 지원하는 경우에만 View Transition API를 호출하는 `updateView()` 함수 안에 이 기능을 캡슐화했습니다.

```js
function updateView(event) {
  // 이벤트가 <a> 태그에서 실행되는지, <img> 태그에서 실행하는지에 따라 차이를 처리합니다.
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // 뷰 전환을 지원하지 않는 브라우저를 위한 폴백입니다.
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // 뷰 전환을 사용합니다.
  const transition = document.startViewTransition(() => displayNewImage());
}
```

이 코드는 표시되는 이미지 간의 전환을 처리하는 데 충분합니다. 지원 브라우저에서는 이전 이미지와 캡션에서 새 이미지와 캡션으로의 변경이 부드러운 크로스 페이드(기본 뷰 전환)로 표시됩니다. 비지원 브라우저에서도 여전히 작동하지만, 멋진 애니메이션은 제공되지 않습니다.

또한 `startViewTransition()`은 뷰 전환 프로세스의 여러 부분에 도달할 때마다 코드를 실행할 수 있도록 여러 프로미스를 포함하는 `ViewTransition` (en-US) 인스턴스를 반환한다는 점도 언급할 가치가 있습니다.

### 뷰 전환 프로세스

뷰 전환이 어떻게 작동하는지 살펴보겠습니다.

1. `document.startViewTransition()`이 호출되면, API는 현재 페이지의 스크린샷을 찍습니다.
2. 그런 다음 `startViewTransition()`에 전달된 콜백(이 경우, `displayNewImage`)이 호출되어 DOM이 변경됩니다. 콜백이 성공적으로 실행되면 `ViewTransition.updateCallbackDone` (en-US) 프로미스가 이행되어 DOM 업데이트에 응답할 수 있습니다.
3. API는 페이지의 새 상태를 실시간 표현으로 캡처합니다.
4. API는 다음과 같은 구조로 의사 요소 트리를 구성합니다.
```

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)
```

    * `::view-transition` (en-US)은 모든 뷰 전환을 포함하고 다른 모든 페이지 콘텐츠 위에 위치하는 뷰 전환 오버레이의 루트입니다.
    * `::view-transition-old` (en-US)는 이전 페이지 뷰의 스크린샷이고, `::view-transition-new` (en-US)는 새 페이지 뷰의 실시간 표현입니다. 이 두 가지 모두 `<img>` 또는 `<video>`와 같은 방식으로 대체된 콘텐츠로 렌더링되므로 `object-fit` 및 `object-position`과 같은 편리한 속성을 사용하여 스타일을 지정할 수 있습니다.전환 애니메이션이 실행되려고 하면 `ViewTransition.ready` (en-US) 프로미스가 이행되며, 기본값 대신 사용자 지정 자바스크립트 애니메이션을 실행하여 응답할 수 있습니다.
5. 이전 페이지 뷰는 `opacity` 1에서 0으로 애니메이션을 적용하고, 새로운 뷰는 `opacity`를 0에서 1로 애니메이션을 적용하며 기본 크로스 페이드가 생성됩니다.
6. 전환 애니메이션이 종료 상태에 도달하면, `ViewTransition.finished` (en-US) 프로미스가 이행되어 응답할 수 있습니다.
### 요소마다 다른 전환

현재 DOM 업데이트 시 변경되는 모든 다른 요소는 동일한 애니메이션을 사용하여 전환됩니다. 다른 요소에 기본 "루트" 애니메이션과 다른 애니메이션을 적용하려면 `view-transition-name` (en-US) 속성을 사용하여 요소를 구분할 수 있습니다. 아래는 예시입니다.

```css
figcaption {
  view-transition-name: figure-caption;
}
```

뷰 전환 측면에서 페이지의 나머지 부분과 구분하기 위해 `<figcaption>` 요소에 `figure-caption`이라는 `view-transition-name`을 지정했습니다.

이 CSS를 적용하면, 의사 요소 트리는 이제 다음과 같이 표시됩니다.
```

::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(figure-caption)
  └─ ::view-transition-image-pair(figure-caption)
      ├─ ::view-transition-old(figure-caption)
      └─ ::view-transition-new(figure-caption)
```

두 번째 의사 요소 세트의 존재로 `<figcaption>`에만 별도의 뷰 전환 스타일을 적용할 수 있습니다. 서로 다른 이전 및 새 페이지 뷰 캡처는 서로 완전히 분리되어 처리됩니다.

`view-transition-name`의 값은 `none`을 제외한 모든 값을 사용할 수 있으며, 특히 `none` 값은 해당 요소가 뷰 전환에 참여하지 않음을 의미합니다.

**참고:** `view-transition-name`은 고유해야 합니다. 만약 렌더링된 두 요소의 `view-transition-name`이 같으면, `ViewTransition.ready` (en-US)가 거부되고 전환이 건너뛰어집니다.

### 애니메이션 사용자 지정하기

뷰 전환 의사 요소에는 기본 CSS 애니메이션 (en-US)이 적용됩니다. (참조 페이지에 자세히 설명되어 있습니다).

특히 `높이`, `너비`, `위치` 및 `변형`에 대한 전환에는 부드러운 교차 페이드 애니메이션이 사용되지 않습니다. 대신, 높이 및 너비 전환은 부드러운 스케일링 애니메이션을 적용합니다. 반면 위치와 변형 전환은 요소에 부드러운 이동 애니메이션을 적용합니다.

일반 CSS를 사용하여 원하는 방식으로 기본 애니메이션을 수정할 수 있습니다.

예를 들어 속도를 변경할 수 있습니다.

```css
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}
```

좀 더 흥미로운 것을 살펴보겠습니다. `<figcaption>`에 대한 사용자 지정 애니메이션입니다.

```css
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

여기서는 사용자 정의 CSS 애니메이션을 만들어 `::view-transition-old(figure-caption)` 및 `::view-transition-new(figure-caption)` 의사 요소에 적용했습니다. 또한 두 요소에 다른 여러 스타일을 추가하여 같은 위치에 유지하고 기본 스타일이 사용자 정의 애니메이션을 방해하지 않도록 했습니다.

또한 위보다 더 간단하고 더 멋진 결과를 만들어 내는 다른 전환 옵션도 발견했습니다. 최종 `<figcaption>` 뷰 전환은 다음과 같이 완성되었습니다.

```css
figcaption {
  view-transition-name: figure-caption;
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: 100%;
}
```

기본적으로 `::view-transition-group` 은 이전 뷰와 새 뷰 간에 너비와 높이를 전환하기 때문에 이 방법이 작동합니다. 두 상태 모두에 고정된 `높이`를 설정하기만 하면 작동합니다.

**참고:** View Transitions API를 사용한 부드럽고 간단한 전환에는 몇 가지 다른 사용자 지정 예제가 포함되어 있습니다.

### JavaScript로 애니메이션 제어하기

`document.startViewTransition()` 메서드는 여러 프로미스 멤버를 포함하는 `ViewTransition` (en-US) 객체 인스턴스를 반환하며, 이 인스턴스에는 전환의 다양한 상태에 도달할 때 JavaScript를 실행할 수 있는 여러 프로미스 멤버가 있습니다. 예를 들어, 의사 요소 트리가 생성되고 애니메이션이 시작되면 `ViewTransition.ready` (en-US)가 이행되고, 애니메이션이 완료되고 새 페이지 뷰가 사용자에게 표시되고 상호 작용하면 `ViewTransition.finished` (en-US)가 이행됩니다.

예를 들어, 다음 JavaScript를 사용하여 클릭 시 사용자의 커서 위치에서 발생하는 원형 뷰 전환을 생성할 수 있으며, Web Animations API에서 제공하는 애니메이션을 사용할 수 있습니다.

```js
// 마지막 클릭 이벤트를 저장합니다.
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // 이 API를 지원하지 않는 브라우저를 위한 폴백입니다.
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 클릭 위치 가져오거나 화면 중앙으로 폴백합니다.
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 가장 먼 가장자리까지의 거리를 구합니다.
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // 전환을 만듭니다.
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 의사 요소가 생성될 때까지 기다립니다.
  transition.ready.then(() => {
    // 루트의 새 뷰에 애니메이션을 적용합니다.
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // 애니메이션을 적용할 의사 요소를 지정합니다.
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```

이 애니메이션에는 기본 CSS 애니메이션을 끄고 이전 뷰 상태와 새 뷰 상태가 어떤 식으로든 혼합되지 않고, 새로운 상태가 전환되는 것이 아니라 이전 상태 위로 "지워지도록" 하려면, 다음 CSS도 필요합니다.

```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

인터페이스
-----

`ViewTransition` (en-US)

뷰 전환을 나타내며, 전환이 다른 상태(예: 애니메이션 실행 준비 또는 애니메이션 완료)에 도달할 때 반응하거나, 전환을 완전히 건너뛸 수 있는 기능을 제공합니다.

다른 인터페이스로의 확장
-------------

`Document.startViewTransition()`

새 뷰 전환을 시작하고 이를 나타내는 `ViewTransition` (en-US) 객체를 반환합니다.

CSS 추가 사항
---------

### 속성

`view-transition-name` (en-US)

선택한 요소에 별도의 식별 이름을 제공하고 루트 뷰 전환과 별도의 뷰 전환에 참여하도록 하거나 `none` 값이 지정된 경우 뷰 전환을 수행하지 않도록 합니다.

### 의사 요소(Pseudo-elements)

`::view-transition` (en-US)

모든 뷰 전환을 포함하고 다른 모든 페이지 콘텐츠 위에 위치하는 뷰 전환 오버레이의 루트입니다.

`::view-transition-group()` (en-US)

단일 뷰 전환의 루트입니다.

`::view-transition-image-pair()` (en-US)

뷰 전환의 이전 뷰와 새 뷰(전환 전과 후)를 위한 컨테이너입니다.

`::view-transition-old()` (en-US)

전환 전 이전 뷰에 대한 정적 스크린샷입니다.

`::view-transition-new()` (en-US)

전환 후 새로운 뷰애 대한 실시간 표현입니다.

예제
--

* 기본 뷰 전환 데모: 이전 이미지와 새 이미지, 이전 캡션과 새 캡션 간에 별도의 전환이 있는 기본 이미지 갤러리 데모입니다.
* HTTP 203 playlist: 다양한 뷰 전환을 제공하는 보다 정교한 동영상 플레이어 데모 앱으로, View Transitions API를 사용한 부드럽고 간단한 전환에 대해 설명합니다.
명세서
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

같이 보기
-----

* View Transitions API를 사용한 부드럽고 간단한 전환
* View Transitions API: 부드러운 페이지 전환 만들기


Web Audio API - Web API

Web Audio API
=============

Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.

Web audio의 개념과 사용법
------------------

Web Audio API는 **오디오 컨텍스트** 내부의 오디오 조작을 핸들링하는 것을 포함하며, **모듈러 라우팅**을 허용하도록 설계되어 있습니다. 기본적인 오디오 연산은 **오디오 노드**를 통해 수행되며, **오디오 노드**는 서로 연결되어 **오디오 라우팅 그래프**를 형성합니다. 서로 다른 타입의 채널 레이아웃을 포함한 다수의 오디오 소스는 단일 컨텍스트 내에서도 지원됩니다. 이 모듈식 설계는 역동적이고 복합적인 오디오 기능 생성을 위한 유연성을 제공합니다.

오디오 노드는 각각의 입력과 출력을 통해 체인과 간단한 망으로 연결됩니다. 이들은 일반적으로 하나 이상의 소스로 시작합니다. 소스들은 초당 수만 개 가량의 아주 작은 시간 단위의 음향 인텐시티(샘플) 배열로 제공됩니다. 소스는 `OscillatorNode` (en-US)와 같이 수학적으로 계산된 것이거나, `AudioBufferSourceNode` 또는 `MediaElementAudioSourceNode` (en-US)와 같은 사운드/비디오 파일, 마지막으로 `MediaStreamAudioSourceNode` (en-US)와 같은 오디오 스트림일 수 있습니다. 사실, 사운드 파일은 마이크나 전자기기로 생성된 음향 인텐시티가 녹음된 것에 불과하며, 하나의 복합적인 파동으로 믹싱됩니다.

오디오 노드의 출력은 다른 노드의 입력 단자와 연결될 수 있습니다. 이 입력은 노드의 사운드 샘플 스트림을 다른 스트림으로 믹스하거나 변경합니다. 일반적인 변경은 `GainNode` (en-US)와 같이 샘플에 소리를 더 키우거나 줄이는 값을 곱하는 것입니다. 사운드가 의도된 이펙트를 위해 충분히 처리되면, 이를 `AudioContext.destination` (en-US)의 입력에 연결해 사운드를 스피커와 헤드폰으로 출력합니다. 이 연결은 사용자가 오디오를 듣도록 하기 위한 용도로만 필요합니다.

웹 오디오의 간단하고 일반적인 작업 흐름은 다음과 같습니다 :

1. 오디오 컨텍스트를 생성합니다.
2. 컨텍스트 내에 소스를 생성합니다.(ex - <audio>, 발진기, 스트림)
3. 이펙트 노드를 생성합니다. (ex - 잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)
4. 오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)
5. 사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.

![오디오 컨텍스트라고 쓰여진 외부 박스와, 소스, 이펙트, 목적지라고 쓰여진 세 개의 내부 박스를 가진 간단한 박스 다이어그램. 세 개의 내부 박스는 사이에 좌에서 우를 가리키는 화살표를 가지고 있는데, 이는 오디오 정보의 흐름을 나타냅니다.](/ko/docs/Web/API/Web_Audio_API/audio-context_.png)

높은 정확도와 적은 지연시간을 가진 타이밍 계산 덕분에, 개발자는 높은 샘플 레이트에서도 특정 샘플을 대상으로 이벤트에 정확하게 응답하는 코드를 작성할 수 있습니다. 따라서 드럼 머신이나 시퀀서 등의 어플리케이션은 충분히 구현 가능합니다.

Web Audio API는 오디오가 어떻게 *공간화*될지 컨트롤할 수 있도록 합니다. *소스-리스너 모델*을 기반으로 하는 시스템을 사용하면 *패닝 모델*과 *거리-유도 감쇄* 혹은 움직이는 소스(혹은 움직이는 청자)를 통해 유발된 *도플러 시프트* 컨트롤이 가능합니다.

**참고:** Web Audio API의 기본 개념 문서에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.

Web Audio API 타겟 사용자층
---------------------

오디오나 음악 용어에 익숙하지 않은 사람은 Web Audio API가 막막하게 느껴질 수 있습니다. 또한 Web Audio API가 굉장히 다양한 기능을 제공하는 만큼 개발자로서는 시작하기 어렵게 느껴질 수 있습니다.

Web Audio API는 futurelibrary.no에서와 같이 배경 음악을 깔거나, 작성된 폼에 대한 피드백을 제공하는 등, 웹사이트에 간단한 오디오 기능을 제공하는 데에 사용될 수 있습니다. 그리고 물론 상호작용 가능한 상급자용 악기 기능을 만드는 데에도 사용할 수 있습니다. 따라서 Web Audio API는 개발자와 뮤지션 모두가 사용 가능합니다.

프로그래밍에는 익숙하지만 각종 용어나 API의 구조에 대해 공부하고 싶으신 분들을 위한 간단한 튜토리얼이 준비되어 있습니다.

Web Audio API의 원리에는 API 내에서 디지털 오디오가 어떻게 동작하는지 나와 있습니다. 해당 문서에는 API가 어떤 원리를 이용해 작성되었는지에 대한 설명도 잘 되어 있습니다.

코드를 작성하는 것은 카드 게임과 비슷합니다. 규칙을 배우고, 플레이합니다. 모르겠는 규칙은 다시 공부하고, 다시 새로운 판을 합니다. 마찬가지로, 이 문서와 첫 튜토리얼에서 설명하는 것만으로 부족하다고 느끼신다면 첫 튜토리얼의 내용을 보충하는 동시에 여러 테크닉을 이용하여 스텝 시퀀서를 만드는 법을 설명하는 상급자용 튜토리얼을 읽어보시는 것을 추천합니다.

그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 자습서를 찾아 보실 수 있습니다.

만약에 프로그래밍보다는 음악이 친숙하고, 음악 이론에 익숙하며, 악기를 만들고 싶으시다면 바로 상급자용 튜토리얼부터 시작하여 여러가지를 만들기 시작하시면 됩니다. 위의 튜토리얼은 음표를 배치하는 법, 저주파 발진기 등 맞춤형 Oscillator(발진기)와 Envelope를 설계하는 법 등을 설명하고 있으니, 이를 읽으며 사이드바의 자료를 참고하시면 될 것입니다.

프로그래밍에 전혀 익숙하지 않으시다면 JavaScript 기초 튜토리얼을 먼저 읽고 이 문서를 다시 읽으시는 게 나을 수도 있습니다. Mozilla의 JavaScript 기초만큼 좋은 자료도 몇 없죠.

Web Audio API 인터페이스
-------------------

Web Audio API는 다양한 인터페이스와 연관 이벤트를 가지고 있으며, 이는 9가지의 기능적 범주로 나뉩니다.

### 일반 오디오 그래프 정의

Web Audio API 사용범위 내에서 오디오 그래프를 형성하는 일반적인 컨테이너와 정의입니다.

`AudioContext`

**`AudioContext`** 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 `AudioNode`로 표현됩니다. `AudioContext`는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 `AudioContext`를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.

`AudioNode`

**`AudioNode`** 인터페이스는 오디오 소스(`<audio>` (en-US)나 `<video>` 요소), 오디오 목적지, 중간 처리 모듈(`BiquadFilterNode`이나 `GainNode` (en-US))과 같은 오디오 처리 모듈을 나타냅니다.

`AudioParam`

**`AudioParam`** 인터페이스는 `AudioNode`중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.

`AudioParamMap`

`AudioParam` 인터페이스 그룹에 maplike 인터페이스를 제공하는데, 이는 `forEach()`, `get()`, `has()`, `keys()`, `values()` 메서드와 `size` 속성이 제공된다는 것을 의미합니다.

`BaseAudioContext`

**`BaseAudioContext`** 인터페이스는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로서 동작하는데, 이는 각각 `AudioContext` 와 `OfflineAudioContext`로 대표됩니다. `BaseAudioContext`는 직접 쓰여질 수 없습니다 — 이 두 가지 상속되는 인터페이스 중 하나를 통해 이것의 기능을 사용할 수 있습니다.

The `ended (en-US)` event

**`ended`** 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.

### 오디오 소스 정의하기

Web Audio API에서 사용하기 위한 오디오 소스를 정의하는 인터페이스입니다.

`AudioScheduledSourceNode`

**`AudioScheduledSourceNode`** 는 오디오 소스 노드 인터페이스의 몇 가지 유형에 대한 부모 인터페이스입니다. 이것은 `AudioNode`입니다.

`OscillatorNode` (en-US)

**`OscillatorNode`** 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 `AudioNode` 오디오 프로세싱 모듈입니다.

`AudioBuffer`

**`AudioBuffer`** 인터페이스는 `AudioContext.decodeAudioData()` (en-US)메소드를 사용해 오디오 파일에서 생성되거나 `AudioContext.createBuffer()` (en-US)를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 `AudioBufferSourceNode`에 삽입될 수 있습니다.

`AudioBufferSourceNode`

**`AudioBufferSourceNode`** 인터페이스는 `AudioBuffer`에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 `AudioNode`입니다.

`MediaElementAudioSourceNode` (en-US)

**`MediaElementAudioSourceNode`** 인터페이스는 `<audio>` (en-US) 나 `<video>` HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 `AudioNode`입니다.

`MediaStreamAudioSourceNode` (en-US)

**`MediaStreamAudioSourceNode`** 인터페이스는 WebRTC `MediaStream` (en-US)(웹캠, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 `AudioNode`입니다.

`MediaStreamTrackAudioSourceNode` (en-US)

`MediaStreamTrackAudioSourceNode` (en-US) 유형의 노드는 데이터가 `MediaStreamTrack`로부터 오는 오디오 소스를 표현합니다. 이 노드를 생성하기 위해 `createMediaStreamTrackSource()` (en-US) 메서드를 사용하여 이 노드를 생성할 때, 여러분은 어떤 트랙을 사용할 지 명시합니다. 이것은 `MediaStreamAudioSourceNode`보다 더 많은 제어를 제공합니다.

### 오디오 이펙트 필터 정의하기

오디오 소스에 적용할 이펙트를 정의하는 인터페이스입니다.

`BiquadFilterNode`

**`BiquadFilterNode`** 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 `AudioNode`입니다. `BiquadFilterNode`는 항상 단 하나의 입력과 출력만을 가집니다.

`ConvolverNode` (en-US)

**`ConvolverNode`** 인터페이스는 주어진 `AudioBuffer`에 선형 콘볼루션을 수행하는 `AudioNode`이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다.

`DelayNode` (en-US)

**`DelayNode`** 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 `AudioNode` 오디오 처리 모듈입니다.

`DynamicsCompressorNode` (en-US)

**`DynamicsCompressorNode`** 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.

`GainNode` (en-US)

**`GainNode`** 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 `AudioNode` 오디오 모듈입니다.

`WaveShaperNode` (en-US)

**`WaveShaperNode`** 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 `AudioNode`입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.

`PeriodicWave`

`OscillatorNode` (en-US)의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.

`IIRFilterNode` (en-US)

일반적인 **infinite impulse response** (IIR) 필터를 구현합니다; 이 유형의 필터는 음색 제어 장치와 그래픽 이퀄라이저를 구현하는 데 사용될 수 있습니다.

### 오디오 목적지 정의하기

처리된 오디오를 어디에 출력할지 정의하는 인터페이스입니다.

`AudioDestinationNode`

**`AudioDestinationNode`** 인터페이스는 주어진 컨텍스트 내의 오디오 소스의 최종 목적지를 나타냅니다. 주로 기기의 스피커로 출력할 때 사용됩니다.

`MediaStreamAudioDestinationNode` (en-US)

**`MediaStreamAudioDestinationNode`** 인터페이스는 단일 `AudioMediaStreamTrack` 을 가진 WebRTC `MediaStream` (en-US)로 구성된 오디오 목적지를 나타내며, 이는 `getUserMedia()` (en-US)에서 얻은 `MediaStream` (en-US)과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 `AudioNode`입니다.

### 데이터 분석 및 시각화

오디오에서 재생시간이나 주파수 등의 데이터를 추출하기 위한 인터페이스입니다.

`AnalyserNode`

**`AnalyserNode`** 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.

### 오디오 채널을 분리하고 병합하기

오디오 채널들을 분리하거나 병합하기 위한 인터페이스입니다.

`ChannelSplitterNode` (en-US)

**`ChannelSplitterNode`** 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.

`ChannelMergerNode` (en-US)

**`ChannelMergerNode`** 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.

### 오디오 공간화

오디오 소스에 오디오 공간화 패닝 이펙트를 추가하는 인터페이스입니다.

`AudioListener` (en-US)

**`AudioListener`** 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.

`PannerNode` (en-US)

**`PannerNode`** 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 `AudioNode` 오디오 프로세싱 모듈입니다.

`StereoPannerNode` (en-US)

**`StereoPannerNode`** 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.

### JavaScript에서의 오디오 프로세싱

오디오 worklet을 사용하여, 여러분은 JavaScript 또는 WebAssembly로 작성된 사용자 정의 오디오 노드를 정의할 수 있습니다. 오디오 worklet은 `Worklet` (en-US) 인터페이스를 구현하는데, 이는 `Worker` 인터페이스의 가벼운 버전입니다.

`AudioWorklet`

`AudioWorklet` 인터페이스는 `AudioContext` 객체의 `audioWorklet` (en-US)을 통하여 사용 가능하고, 메인 스레드를 실행할 오디오 worklet에 모듈을 추가할 수 있게 합니다.

`AudioWorkletNode`

`AudioWorkletNode` 인터페이스는 오디오 그래프에 임베드된 `AudioNode`을 나타내고 해당하는 `AudioWorkletProcessor`에 메시지를 전달할 수 있습니다.

`AudioWorkletProcessor`

`AudioWorkletProcessor` 인터페이스는 오디오를 직접 생성하거나, 처리하거나, 또는 분석하는 `AudioWorkletGlobalScope`에서 실행되는 오디오 프로세싱 코드를 나타내고, 해당하는 `AudioWorkletNode`에 메시지를 전달할 수 있습니다.

`AudioWorkletGlobalScope`

`AudioWorkletGlobalScope` 인터페이스는 오디오 프로세싱 스크립트가 실행되는 워커 컨텍스트를 나타내는 파생된 객체인 `WorkletGlobalScope`입니다; 이것은 메인 스레드가 아닌 worklet 스레드에서 JavaScript를 사용하여 직접적으로 오디오 데이터의 생성, 처리, 분석을 가능하게 하도록 설계되었습니다.

#### 안 쓰임: 스크립트 프로세서 노드

오디오 worklet이 정의되기 전에, Web Audio API는 JavaScript 기반의 오디오 프로세싱을 위해 `ScriptProcessorNode`를 사용했습니다. 코드가 메인 스레드에서 실행되기 때문에, 나쁜 성능을 가지고 있었습니다. `ScriptProcessorNode`는 역사적인 이유로 보존되나 deprecated되었습니다.

`ScriptProcessorNode` (en-US)
지원이 중단되었습니다

**`ScriptProcessorNode`** 인터페이스는 JavaScript를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 `AudioNode` 오디오 프로세싱 모듈입니다. `AudioProcessingEvent` (en-US) 인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.

`audioprocess (en-US)` (event)
지원이 중단되었습니다

`audioprocess` 이벤트는 Web Audio API `ScriptProcessorNode` (en-US)의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.

`AudioProcessingEvent` (en-US)
지원이 중단되었습니다

Web Audio API `AudioProcessingEvent`는 `ScriptProcessorNode` (en-US) 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.

### 오프라인/백그라운드 오디오 처리하기

다음을 이용해 백그라운드(장치의 스피커가 아닌 `AudioBuffer`으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.

`OfflineAudioContext`

**`OfflineAudioContext`** 인터페이스는 `AudioNode`로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 `AudioContext` 인터페이스입니다. 표준 **`AudioContext`** 와 대조적으로, **`OfflineAudioContext`** 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다.

`complete (en-US)` (event)

**`complete`** 이벤트는 `OfflineAudioContext`의 렌더링이 종료될때 발생합니다.

`OfflineAudioCompletionEvent` (en-US)

**`OfflineAudioCompletionEvent`** 이벤트는 `OfflineAudioContext` 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. `complete (en-US)` 이벤트는 이 이벤트를 구현합니다.

가이드와 자습서
--------

AudioWorklet을 사용하는 백그라운드 오디오 프로세싱Web Audio API가 처음 브라우저에 소개되었을 때, 이것은 실시간으로 오디오를 조작하는 사용자 정의 오디오 프로세서를 생성하기 위해 JavaScript 코드를 사용하고 있었습니다. `ScriptProcessorNode`의 문제점은 단순했습니다: 이것은 메인 스레드에서 실행되기 때문에 실행을 마치기 전까지 다른 모든 동작을 막았습니다. 이러한 방식은 이상적이지 않았습니다. 특히 오디오 프로세싱같이 계산적으로 비용이 많이 들 수 있는 무언가에 대해서 말입니다.

ConstantSourceNode로 다수의 파라미터 제어하기이 글은 다수의 파라미터가 같은 값을 공유하도록 파라미터들을 함께 연결하기 위해 어떻게 `ConstantSourceNode`를 사용하는지를 설명합니다. 이 값은 `ConstantSourceNode.offset` 파라미터의 값을 설정함으로써 변경될 수 있습니다.

IIR 필터 사용하기Web Audio API의 **`IIRFilterNode`** 인터페이스는 일반적인 무한 임펄스 응답 (IIR) 필터를 구현하는 `AudioNode` 프로세서입니다; 이 유형의 필터는 음색 제어 장치와 그래픽 이퀄라이저를 구현하는 데 사용될 수 있으며, 필터 응답 파라미터들은 필요하면 조율될 수 있도록 명시될 수 있습니다. 이 글은 어떻게 이것을 구현하는지, 그리고 간단한 예제로 어떻게 이것을 사용하는지를 살펴봅니다.

Web Audio API 사용하기Web Audio API 시작하기를 한번 봐 봅시다. 우리는 몇 가지 개념들을 간략하게 살펴보고, 그 다음에 오디오 트랙의 로드, 재생, 정지하고 볼륨 및 스테레오 패닝을 변경할 수 있는 간단한 카세트 플레이어 예제를 공부할 것입니다.

Web Audio API 잘 사용하기창의적인 코드를 작성할 때 엄격하게 옳거나 틀린 길은 없습니다. 여러분이 보안, 성능, 접근성을 고려하는 한, 여러분은 여러분만의 스타일에 적응할 수 있습니다. 이 문서에서, 우리는 몇 가지의 *좋은 습관들* — Web Audio API를 가지고 작업하는 데 있어서의 가이드라인, 팁, 그리고 트릭들 — 을 공유하고자 합니다.

Web Audio API로 시각화하기Web Audio API의 가장 흥미로운 기능 중 하나는 주파수, 파형, 그리고 다른 데이터들을 오디오 소스로부터 추출할 수 있는 능력인데, 이는 그리고 나서 시각화하는 데 사용될 수 있습니다. 이 글은 어떻게 시각화를 하는지 설명하고, 기초적인 사용 방법을 두 개 제공합니다.

Web Audio API의 기본 개념오디오가 어떻게 여러분의 앱을 통해서 전송(route)되는지를 설계하는 동안 여러분이 적절한 결정을 내리는 것을 돕기 위해, 이 문서는 Web Audio API의 기능이 어떻게 동작하는가를 뒷받침하는 얼마간의 오디오 이론을 설명합니다. 이 문서를 읽는다고 해서 여러분이 숙련된 사운드 엔지니어가 될 수는 없지만, 왜 Web Audio API가 이렇게 동작하는지를 이해하기에 충분한 배경지식을 줄 것입니다.

Web audio 공간화 기초Web Audio API의 사운드 프로세싱 (그리고 다른 것들) 의 광범위한 다양성이 마치 충분하지 않다는 것처럼, Web Audio API는 또한 리스너가 음원 주위에서 움직일 때 소리의 차이를 모방할 수 있게 하는 기능을 포함하고 있습니다. 그 예시로는 3D 게임에서 음원 주위에서 움직일 때의 패닝 기능을 들 수 있습니다. 이 기능에 대한 공식적인 용어는 **spatialization**(공간화)이고, 이 글은 어떻게 그런 시스템을 구현하는지에 대한 기초를 다룰 것입니다.

Web Audio 사용을 분석하기 위한 도구들Web Audio API 코드를 작성하는 중에, 여러분은 여러분이 만든 노드의 그래프를 분석하거나 그게 아니라면 여러분의 작업을 디버그할 도구가 필요하다고 생각했을 지도 모릅니다. 이 글은 여러분을 도울 이용 가능한 도구들에 대해 이야기합니다.

고급 기법: 오디오 생성 및 시퀸싱이 자습서에서, 우리는 사운드 생성과 수정 뿐만 아니라, 타이밍과 스케쥴링도 다룰 것입니다. 우리는 샘플 로딩, 엔벨로프, 필터, 웨이브 테이블, 주파수 조정을 소개할 것입니다. 만약 여러분이 이 용어들에 익숙하고 Web Audio API 내에서의 이것들의 응용에 대한 입문을 찾고 있다면, 맞는 장소에 오셨습니다.

예제와 튜토리얼: 간단한 신시사이저 키보드이 문서는 마우스를 사용해 플레이할 수 있는 비디오 키보드의 데모와 코드를 보여줍니다. 이 키보드는 표준 파형들과 사용자 정의 파형 중에서 선택할 수 있는 기능을 제공하고, 키보드 아래에 있는 볼륨 슬라이더를 사용하여 메인 gain을 제어할 수 있습니다. 이 예제는 다음의 Web API 인터페이스를 사용합니다: `AudioContext`, `OscillatorNode`, `PeriodicWave`, 그리고 `GainNode`.

예제
--

여러분은 GitHub의 webaudio-example 레포지토리에서 몇 개의 예제를 찾을 수 있습니다.

명세
--

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

같이 보기
-----

### 자습서/가이드

* Web Audio API의 기본 개념
* Web Audio API 사용하기
* 고급 기술: 소리 생성, 시퀸싱, 타이밍, 스케쥴링
* 미디어와 Web Audio API에 대한 자동 재생 가이드
* IIR 필터 사용하기
* Web Audio API 시각화
* Web audio 공간화 기초
* ConstantSourceNode로 다수의 매개변수 제어하기
* positional audio와 WebGL 같이 사용하기
* Web Audio API로 게임 오디오 개발하기
* webkitAudioContext 코드를 AudioContext 기반 표준에 포팅하기
### 라이브러리

* Tones: Web Audio API를 사용하여 특정한 음색/음을 재생하는 간단한 라이브러리
* Tone.js: 브라우저에서 상호작용을 하는 음악을 생성하기 위한 프레임워크
* howler.js: 다른 유용한 기능들을 제공할 뿐만 아니라, Web Audio API을 기본으로 하고 HTML5 Audio를 대비책으로 가지는 JS 오디오 라이브러리
* Mooog: jQuery 스타일의 AudioNode 체이닝, mixer 스타일의 전송/반환, 등등
* XSound: 신시사이저, 이펙트, 시각화, 레코딩 등을 위한 Web Audio API 라이브러리
* OpenLang: 다른 소스로부터 하나의 파일에 비디오와 오디오를 레코드하고 결합시키기 위한 Web Audio API를 사용하는 HTML5 비디오 language lab 웹 애플리케이션 (GitHub에 있는 소스)
* Pts.js: 웹 오디오 시각화를 단순화합니다 (가이드)
### 관련 주제

* 웹 미디어 기술
* 웹에서의 미디어 타입과 포맷에 대한 가이드 (en-US)


VREyeParameters - Web API

VREyeParameters
===============

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

WebVR API (en-US)의 **`VREyeParameters`** 인터페이스는 시야 정보 필드를 포함하여 특정한 눈에 대한 장면을 정확하게 렌더링 하는 데 필요한 모든 정보를 나타냅니다.

`VRDisplay.getEyeParameters()` (en-US) 방법을 통해 액세스 할 수 있습니다.

**경고:** The values in this interface should not be used to compute view or projection matrices. In order to ensure the widest possible hardware compatibility use the matrices provided by `VRFrameData` (en-US).

속성
--

`VREyeParameters.offset` (en-US) 읽기 전용

사용자 눈 사이의 중심점에서 눈 중심까지의 거리를 미터 단위로 나타냅니다.

`VREyeParameters.fieldOfView` (en-US) 읽기 전용

현재 눈에 보이는 시야를 설명하며,사용자가 동공 사이의 거리(m/s)를 조절할 때 달라질 수 있습니다.(IPD).

`VREyeParameters.renderWidth` (en-US) 읽기 전용

각 눈 뷰포트의 권장 렌더 타겟 폭을 픽셀 단위로 설명합니다.

`VREyeParameters.renderHeight` (en-US) 읽기 전용

각 눈 뷰포트의 권장 렌더 타겟 높이를 픽셀 단위로 나타냅니다..

예제
--

```js
navigator.getVRDisplays().then(function (displays) {
  // If a display is available, use it to present the scene
  vrDisplay = displays[0];
  console.log("Display found");
  // Starting the presentation when the button is clicked:
  // It can only be called in response to a user gesture
  btn.addEventListener("click", function () {
    vrDisplay.requestPresent([{ source: canvas }]).then(function () {
      console.log("Presenting to WebVR display");

      // Set the canvas size to the size of the vrDisplay viewport

      var leftEye = vrDisplay.getEyeParameters("left");
      var rightEye = vrDisplay.getEyeParameters("right");

      canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
      canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

      drawVRScene();
    });
  });
});
```

명세
--

#### No specification found

No specification data found for `api.VREyeParameters`.
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.

같이 보기
-----

* WebVR API homepage (en-US)
* MozVr.com — demos, downloads, and other resources from the Mozilla VR team.


HTMLMediaElement - Web API

HTMLMediaElement
================

**`HTMLMediaElement`** 는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 `HTMLElement`에 메소드와 프로퍼티를 추가한 인터페이스입니다. `HTMLVideoElement` 와 `HTMLAudioElement` (en-US) 는 이 인터페이스를 상속합니다.

속성(Properties)
--------------

*이 인터페이스는 `HTMLElement`, `Element` (en-US), `Node` (en-US), and `EventTarget`의 프로퍼티들도 모두 상속합니다.*

`HTMLMediaElement.audioTracks` (en-US)

`AudioTrackList` (en-US)는 엘레먼트의 `AudioTrack` (en-US) 객체의 목록입니다.

`HTMLMediaElement.autoplay`

미디어가 준비된 즉시 재생할 것인지 결정하는 `autoplay` 속성에 연결된 `Boolean`값입니다..> **참고:** 오디오(또는 오디오가 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 그리 탐탁치 않은 경험일 수 있습니다, 그러므로 가능한 한 지양해야합니다. 자동 재생 기능을 제공하려면, 사전 동의(사용자에게 기능을 켜도록 함)를 받아야 합니다. 의외로 이 점은 사용자의 조작에 의해 미디어 엘레먼츠를 늦게 생성하는 경우 유용할 수 있습니다.

`HTMLMediaElement.buffered` (en-US) 읽기 전용

`buffered` 프로퍼티에 접근한 시점에 브라우저가 버퍼에 담고 있는 미디어 소스의 구간 데이터를 나타내는 `TimeRanges` (en-US) 객체를 반환합니다.

`HTMLMediaElement.controller` (en-US)

미디어 엘레먼트에 할당된 `MediaController` 객체를 반환하거나 없다면 null을 반환합니다.

`HTMLMediaElement.controls` (en-US)

미디어 엘레먼트에 컨트롤를 표시할지 결정하는 `controls` HTML 속성 값을 `Boolean`으로 반환합니다.

`HTMLMediaElement.controlsList` (en-US) 읽기 전용

브라우저가 미디어 엘레먼트에 자체 컨트롤을 표시할 때 어떤 컨트롤을 보여주거나 숨길 지 결정하는 `DOMTokenList` (en-US)를 반환합니다. `DOMTokenList` 는 `nodownload`, `nofullscreen`, `noremoteplayback` 값을 가질 수 있습니다.

`HTMLMediaElement.crossOrigin` (en-US)

`DOMString`미디어 엘레먼트의 CORS 설정 (en-US)값을 반환합니다.

`HTMLMediaElement.currentSrc` 읽기 전용

현재 선택된 미디어 소스 URL의 절대 경로를 `DOMString`로 반환합니다.

`HTMLMediaElement.currentTime`

현재 재생 시점을 초 단위로 표현한 `double`값입니다. 이 값을 세팅하여 재생 시점을 변경할 수 있습니다.

`HTMLMediaElement.defaultMuted` (en-US)

`Boolean` 기본적으로 음소거 상태인지 표시하는 `muted` HTML 속성 값을 `Boolean`으로 반환합니다.

`HTMLMediaElement.defaultPlaybackRate` (en-US)

미디어 기본 재생 배속을 `double` 값으로 반환합니다.

`HTMLMediaElement.disableRemotePlayback` (en-US)

Is a `Boolean` that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.

`HTMLMediaElement.duration` 읽기 전용

미디어의 전체 길이를 초 단위로 `double` 값으로 반환합니다. 재생 가능한 미디어가 없을 경우 0을 반환합니다.

`HTMLMediaElement.ended` (en-US) 읽기 전용

미디어 재생 완료 여부를 `Boolean` 값으로 반환합니다.

`HTMLMediaElement.error` (en-US) 읽기 전용

마지막으로 발생한 `MediaError` (en-US) 객체를 반환합니다. 발생한 에러가 없을 경우 `null`을 반환합니다.

`HTMLMediaElement.loop` (en-US)

미디어의 반복 재생을 결정하는 HTML 속성 `loop` 값을`Boolean`으로 반환합니다.

`HTMLMediaElement.mediaGroup` (en-US)

미디어가 속한 그룹을 나타내는 `mediagroup` 속성을 `DOMString` 값으로 반환합니다. 같은 그룹에 속한 미디어들은 동일한 `MediaController`에 의해 제어됩니다.

`HTMLMediaElement.mediaKeys` (en-US) 읽기 전용
Experimental

`MediaKeys` (en-US) 객체 또는 `null`을 반환합니다. MediaKeys는 재생할 미디어 데이터를 복호화 하는데 사용합니다.

`HTMLMediaElement.mozAudioCaptured` 읽기 전용
비표준

오디오 스트림 캡쳐 여부를 `Boolean` 값으로 반환합니다. (Mozilla 전용 비표준 속성.)

`HTMLMediaElement.mozFragmentEnd`
비표준

MediaElement의 `currentSrc`에 fragment URI가 존재하는 경우 fragment end time을 `double` 값으로 반환합니다. 없을 경우 미디어 길이를 반환합니다. (Mozilla 전용 비표준 속성)

`HTMLMediaElement.mozFrameBufferLength`
비표준

지원이 중단되었습니다

`MozAudioAvailable` 이벤트 발생시마다 반환된 framebuffer의 샘플 숫자를 `unsigned long` 로 반환한다. 이 숫자는 모든 오디오 채널의 총합이며, 기본값은 채널 수 \* 1024(예, 2 채널 \* 1024 샘플 = 2048)이다.레이턴시가 낮은 경우 `mozFrameBufferLength` 를 더 큰 값으로 지정할 수도 있습니다. 범위는 512에서 16384 사이입니다. 범위를 넘어서는 값은 Error를 발생시킵니다. loadedmetadata (en-US) 이벤트가 발생할 때 새 값을 지정하는 것이 적절합니다. 오디오 정보는 알고 있지만 재생 시작 전 또는 `MozAudioAvailable` 이벤트가 발생하기 전 시점이죠.

`HTMLMediaElement.mozSampleRate` 읽기 전용
비표준

지원이 중단되었습니다

디지털 샘플링 주파수 값을 `double`로 반환합니다. 예를 들어 CD 오디오의 경우 초당 44100 샘플을 가집니다.

`HTMLMediaElement.muted` (en-US)

오디오 음소거 여부를 `Boolean` 값으로 반환합니다. 음소거라면 `true` 반대는 `false` 를 반환합니다..

`HTMLMediaElement.networkState` 읽기 전용

네트워크를 통한 미디어 데이터 전송 상태를 `unsigned short` (enumeration)으로 반환합니다.

`HTMLMediaElement.paused` (en-US) 읽기 전용

미디어 일시 정지 여부를 `Boolean` 값으로 반환합니다.

`HTMLMediaElement.playbackRate`

재생 속도를 `double` 값으로 반환합니다.

`HTMLMediaElement.played` 읽기 전용

브라우저에서 재생된 미디어 소스 범위를 포함한 `TimeRanges` (en-US) 객체를 반환합니다.

`HTMLMediaElement.preload`

프리로드 할 데이터 타입을 명시하는 `preload` attribute를 `DOMString` 값으로 반환한다. 가능한 값들 : `none`, `metadata`, `auto`.

`HTMLMediaElement.preservesPitch` (en-US)
비표준

사운드 피치 유지 여부를 `Boolean` 값으로 반환합니다. `false` 일 경우, 오디오 재생 속도에 따라 변하게 됩니다. Firefox의 (`mozPreservesPitch`)와 WebKit의 (`webkitPreservesPitch`)로 구현되어 있습니다.

`HTMLMediaElement.readyState` 읽기 전용

미디어 대기 상태를 `unsigned short` (enumeration)으로 반환합니다.

`HTMLMediaElement.seekable` 읽기 전용

탐색(seeking) 가능한 범위를 포함한 `TimeRanges` (en-US) 객체를 반환합니다.

`HTMLMediaElement.seeking` 읽기 전용

탐색(seeking) 중 여부를 `Boolean` 값으로 반환합니다.

`HTMLMediaElement.sinkId` (en-US) 읽기 전용
Experimental

별도의 오디오 재생 장치로 출력중이라면 장치의 unique ID를 `DOMString` 으로 반환합니다. 브라우저로 재생 중이라면 빈 문자열입니다. 이 ID는 `MediaDevices.enumerateDevices()`에서 반환된 `MediaDeviceInfo.deviceid`, `id-multimedia`, `id-communications` 중 하나입니다.

`HTMLMediaElement.src`

미디어 리소스 URL이 포함된 `src` attribute를 `DOMString` 값으로 반환합니다.

`HTMLMediaElement.srcObject`

현재 `HTMLMediaElement` 객체에서 재생 중이거나 재생 되었던 미디어를 표현하는 `MediaStream` (en-US) 객체를 반환합니다. 없는 경우, `null` 을 반환합니다.

`HTMLMediaElement.textTracks` (en-US) 읽기 전용

`TextTrack` (en-US) 리스트를 반환합니다.

`HTMLMediaElement.videoTracks` (en-US) 읽기 전용

`VideoTrack` (en-US) 리스트를 반환합니다..> **참고:** Gecko는 싱글 트랙 재생만을 지원합니다. 또한 트랙 메타데이터 파싱은 Ogg 컨테이너 포맷에서만 가능합니다..

`HTMLMediaElement.volume` (en-US)

오디오 볼륨을 `double` 값으로 반환합니다. 0.0 (무음)에서 1.0 (최대크기) 사이 값을 가집니다..

### 이벤트 핸들러(Event handlers)

`HTMLMediaElement.onencrypted` (en-US)

미디어 암호화 시 호출되는 `EventHandler` (en-US)를 설정합니다.

`HTMLMediaElement.onwaitingforkey` (en-US)

재생하기 위해 복호화 키가 필요한 경우 호출되는 `EventHandler` (en-US)를 설정합니다..

폐기된 속성(Obsolete attributes)
---------------------------

아래 속성들은 폐기되었으며 브라우저가 지원하더라도 사용되지 않아야 합니다.

`HTMLMediaElement.initialTime` 읽기 전용
비표준

지원이 중단되었습니다

최초 재생 지점을 초 단위로 `double` 값으로 반환합니다.

`HTMLMediaElement.mozChannels` 읽기 전용
비표준

지원이 중단되었습니다

오디오 채널 수를 `double` 값으로 반환합니다. (예, 스테레오인 경우 `2`).

### 폐기된 이벤트 핸들러(Obsolete event handlers)

`HTMLMediaElement.onmozinterruptbegin`
비표준

지원이 중단되었습니다

Audio Channel manager에 의해 재생이 인터럽트 된 경우 호출되는 `event handler` 를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다.

`HTMLMediaElement.onmozinterruptend`
비표준

지원이 중단되었습니다

재생 인터럽트가 해결된 경우 호출되는 `EventHandler` (en-US)를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다.

메소드
---

*This interface also inherits methods from its ancestors `HTMLElement`, `Element` (en-US), `Node` (en-US), and `EventTarget`.*

`HTMLMediaElement.addTextTrack()`

미디어 엘리먼트에 본문 트랙(자막 등)을 추가합니다.

`HTMLMediaElement.captureStream()` (en-US)
Experimental

미디어 콘텐트의 스트림을 캡쳐하여 `MediaStream` (en-US) 객체로 반환합니다.

`HTMLMediaElement.canPlayType()` (en-US)

현재 지정된 미디어 타입을 재생할 수 있는지 확인합니다.

`HTMLMediaElement.fastSeek()` (en-US)

입력된 시간으로 바로 이동합니다.

`HTMLMediaElement.load()` (en-US)

미디어를 처음으로 리셋하고 `src` 어트리뷰트 또는 `<source>` (en-US) 엘리먼트로 전달된 소스 중 최적의 소스를 선택합니다.

`HTMLMediaElement.mozCaptureStream()`
비표준

[enter description]

`HTMLMediaElement.mozCaptureStreamUntilEnded()`
비표준

[enter description]

`HTMLMediaElement.mozGetMetadata()`
비표준

Returns `Object`, which contains properties that represent metadata from the playing media resource as `{key: value}` pairs. A separate copy of the data is returned each time the method is called. This method must be called after the loadedmetadata (en-US) event fires.

`HTMLMediaElement.pause()` (en-US)

미디어 재생을 일시 정지합니다.

`HTMLMediaElement.play()` (en-US)

미디어를 재생합니다.

`HTMLMediaElement.seekToNextFrame()` (en-US)
비표준

Experimental

미디어의 다음 프레임으로 이동합니다. 비표준이며 실험적인 이 기능은 미디어를 읽고 렌더링 하는 속도를 조절할 수 있게 하거나 프레임별로 필터링 등 추가적인 기능을 수행할 수 있게 합니다.

`HTMLMediaElement.setMediaKeys()` (en-US)
Experimental

미디어 복호화에 필요한 키를 지정합니다. `Promise` 객체를 반환합니다.

`HTMLMediaElement.setSinkId()` (en-US)
Experimental

오디오를 출력할 장치의 ID를 지정합니다. `Promise` 객체를 반환합니다. 어플리케이션이 특정 장치를 사용할 수 있는 경우에만 동작합니다.

폐기된 메소드
-------

아래 메소드들은 폐기되었습니다. 브라우저가 지원하더라도 사용하면 안됩니다.

`HTMLMediaElement.mozLoadFrom()`
비표준

지원이 중단되었습니다

Mozilla 구현체에서만 동작하는 이 메소드는 다른 미디어 엘리먼트에서 데이터를 로드합니다. `load()` 메소드와 유사하게 동작하지만 리소스 선택 알고리즘만 다릅니다. 엘리먼트의 소스를 다른 엘리먼트의 `currentSrc`를 바라보게 합니다. 지정된 엘리먼트의 캐시 및 버퍼에 담긴 데이터에도 모두 접근할 수 있으며 이 말은 즉 다운로드 된 모든 데이터를 공유한다는 의미입니다.

이벤트
---

*부모 엘리먼트 `HTMLElement`에서 상속받은 이벤트와* `GlobalEventHandlers`에 정의된 이벤트를 믹스인합니다. `addEventListener()`를 통해 이벤트를 수신하거나 `oneventname` 프로퍼티에 리스터를 할당하여 수신합니다.

`abort`

에러 외의 원인으로 전체 리소스가 로드 되지 못했을 때 발생합니다.

`canplay`

User agent가 미디어를 재생 가능한 시점에 발생합니다. 다만 전체 미디어를 재생하기 위해서는 콘텐츠의 버퍼링이 더 필요할 수 있습니다.

`canplaythrough`

추가 버퍼링 없이 전체 미디어를 재생할 수 있는 시점에 발생합니다.

`durationchange` (en-US)

duration 속성이 변경된 시점에 발생합니다..

`emptied` (en-US)

미디어가 제거된 시점에 발생합니다. 예를 들어 미디어가 이미 (부분적으로라도) 로드 되었는데. `HTMLMediaElement.load()` (en-US) 메소드 호출로 재 로드할 경우 발생합니다.

`ended` (en-US)

(<audio> or <video>) 미디어가 끝까지 재생 완료 된 시점에 발생합니다.

`error` (en-US)

에러가 발생하여 리소스를 로드할 수 없는 시점에 발생합니다.

`loadeddata` (en-US)

미디어의 첫번째 프레임이 로딩 완료된 시점에 발생합니다.

`loadedmetadata` (en-US)

메타데이터가 로드 된 시점에 발생합니다.

`loadstart` (en-US)

브라우저가 리소스를 로드하기 시작하는 시점에 발생합니다.

`pause` (en-US)

미디어 일시 정지를 요청하고 paused 상태로 진입하는 시점에 발생합니다. 일반적으로 `HTMLMediaElement.pause()` (en-US) 메소드가 호출되는 시점입니다.

`play` (en-US)

`HTMLMediaElement.play()` (en-US) 메소드 호출이나 `autoplay` 속성에 의해 `paused` 프로퍼티가 `true` 에서 `false`로 전환되는 시점에 발생합니다.

`playing` (en-US)

일시 정지 되거나 버퍼 부족으로 재생 정지 된 이후 재생 가능한 시점에 발생합니다.

`progress` (en-US)

브라우저가 리소르를 로딩 중일 때 주기적으로 발생합니다.

`ratechange` (en-US)

재생 속도가 변경될 때 발생합니다.

`seeked`  (en-US)

미디어 시킹이 완료되는 시점에 발생합니다.

`seeking` (en-US)

미디어 시킹이 시작되는 시점에 발생합니다.

`stalled` (en-US)

User agent가 미디어 데이터를 fetch 하였지만 전송되지 않은 경우 발생합니다.

`suspend` (en-US)

미디어 로딩이 중지된 시점에 발생합니다.

`timeupdate` (en-US)

currentTime 속성이 변경되는 시점에 발생합니다.

`volumechange` (en-US)

볼륨이 변경되는 시점에 발생합니다.

`waiting` (en-US)

일시적인 버퍼 부족으로 재생이 정지된 시점에 발생합니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmlmediaelement |

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

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

같이 보기
-----

* 참고 자료
    + `<video>` and `<audio>` (en-US) HTML elements.
    + `HTMLVideoElement` and `HTMLAudioElement` (en-US) interfaces, derived from `HTMLMediaElement`.
* 문서
    + Using HTML5 audio and video (en-US)
    + Media formats supported by the audio and video elements (en-US)
    + Web Audio API (en-US)


HTMLCollection - Web API

HTMLCollection
==============

**`HTMLCollection`** 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(`arguments`처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.

**참고:** `HTMLCollection`의 이름은 현대적 DOM의 이전, 구성요소로 HTML 요소만 지닐 수 있었던 시절에 정해졌습니다.

HTML DOM 내의 `HTMLCollection`은 문서가 바뀔 때 실시간으로 업데이트됩니다.

속성
--

`HTMLCollection.length` (en-US) 읽기 전용

컬렉션 항목의 갯수를 반환합니다.

메서드
---

`HTMLCollection.item()`

리스트에서 주어진 인덱스의 노드를 반환합니다. 인덱스가 범위 밖일 경우 `null`을 반환합니다.

`HTMLCollection.namedItem()` (en-US)

리스트에서 ID 또는 이름 속성이 주어진 문자열과 일치하는 노드를 반환합니다. 이름 속성 판별은 HTML에서만 최후의 수단으로 쓰이며 참조하는 요소가 `name` 속성을 지원해야 합니다. 일치하는 요소가 없으면 `null`을 반환합니다.

JavaScript에서 사용하기
-----------------

`HTMLCollection`은 구성요소를 이름과 인덱스로 동시에 직접 노출합니다. HTML ID는 `:`와 `.`을 유효한 문자로 포함할 수 있으므로 속성 접근 시에는 괄호 표기법을 사용해야 합니다. `HTMLCollection`은 배열 스타일 구성요소 접근법과 충돌할 수 있는 순수 숫자 인덱스를 지원하지 않습니다.

```js
var elem1, elem2;

// document.forms은 HTMLCollection임

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // "true"

elem1 = document.forms["named.item.with.periods"];
```

명세
--

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

같이 보기
-----

* `NodeList`
* `HTMLFormControlsCollection` (en-US), `HTMLOptionsCollection` (en-US)


HTMLDivElement - Web API

HTMLDivElement
==============

**`HTMLDivElement`** 인터페이스는 `HTMLElement` 인터페이스를 확장해, `<div>` (en-US) 요소를 조작할 때 사용할 수 있는 추가 속성을 제공합니다.

속성
--

*부모인 `HTMLElement`로부터 상속합니다.*

`HTMLDivElement.align`
지원이 중단되었습니다

주변 맥락에 대해 요소 콘텐츠의 정렬 위치를 나타내는 `DOMString`입니다. 가능한 값은 `"left"`, `"right"`, `"justify"`, `"center"`입니다.

메서드
---

*부모인 `HTMLElement`로부터 상속합니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<div>` (en-US).


FileList - Web API

FileList
========

**`FileList`** 유형의 객체는 HTML `<input>` (en-US) 요소의 `files` 속성이나 Drag and Drop API의 `DataTransfer`에서 가져올 수 있으며, `<input type="file">` 요소로 선택했거나 웹 콘텐츠 위에 끌어다 놓은 파일 목록에 대한 접근을 제공합니다.

모든 `<input>` 요소 노드에는 `FileList`를 반환하는 `files` 특성이 있어서 파일의 목록에 접근할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 가정하면,

```html
<input id="fileItem" type="file" />
```

아래 코드로 노드의 파일 리스트에서 첫 번째 항목을 `File` 객체로 가져올 수 있습니다.

```js
const file = document.getElementById("fileItem").files[0];
```

속성
--

`length` (en-US)읽기 전용

리스트가 포함한 파일의 수를 나타내는 읽기 전용 값입니다.

메서드
---

`item()` (en-US)읽기 전용

파일 리스트에서 지정한 인덱스에 위치한 파일을 나타내는 `File` 객체를 반환합니다.

예제
--

### 파일 이름 기록하기

이 예제에서는 사용자가 선택한 파일들의 이름을 기록합니다.

#### HTML

```html
<!--'multiple'을 지정해서 여러 파일의 선택을 허용-->
<input id="myfiles" multiple type="file" />
<div class="output"></div>
```

#### CSS

```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```

#### JavaScript

```js
const output = document.querySelector(".output");
const myFiles = document.querySelector("#myfiles");

function logFilenames() {
  const fileInput = document.querySelector("#myfiles");
  const files = fileInput.files;
  const fileListLength = files.length;
  for (let i = 0; i < fileListLength; i++) {
    output.innerText = `${output.innerText}\n${files.item(i).name}`;
  }
}

myFiles.addEventListener("change", logFilenames);
```

#### 결과

명세
--

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `File`
* `FileReader`


AudioDestinationNode - Web API

AudioDestinationNode
====================

`AudioDestinationNode` 은 주어진 컨택스트의 음원의 종착점을 나타냅니다. 보통 스피커를 가리킵니다. 이는 또한 `OfflineAudioContext` 를 사용해 데이터가 녹음되는 노드가 되기도 합니다.

`AudioDestinationNode` has no output (as it *is* the output, no more `AudioNode` can be linked after it in the audio graph) and one input. 입력받은 음원의 채널의 총 갯수는 반드시 0과 `maxChannelCount값의 사이에 있거나 예외(an exception is raised)가 발생한다.`

주어진 `AudioContext` 의 `AudioDestinationNode` 는 `AudioContext.destination` (en-US)프로퍼티를 통해 검색이 된다.

| Number of inputs | `1` |
| --- | --- |
| Number of outputs | `0` |
| Channel count mode | `"explicit"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

Properties
----------

*Inherits properties from its parent,* *`AudioNode`*.

`AudioDestinationNode.maxChannelCount` (en-US)

`unsigned long 형의 물리적인 디바이스로 다룰수 있는 최대 채널의 갯수.`

Methods
-------

*No specific method; inherits methods from its parent,* *`AudioNode`*.

Example
-------

`AudioDestinationNode를 사용하면 복잡한 세팅없이 몇줄의 코드로 오디오 그래프를 확인할 수 있습니다.`

```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

To see a more complete implementation, check out one of our MDN Web Audio examples, such as Voice-change-o-matic or Violent Theremin.

명세서
---

| Specification |
| --- |
| Web Audio API # AudioDestinationNode |

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

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

See also
--------

* Using the Web Audio API


AnimationEvent - Web API

AnimationEvent
==============

**`AnimationEvent`** 인터페이스는 애니메이션과 관련된 정보를 제공하는 이벤트를 나타냅니다.

Event

AnimationEvent생성자
---

`AnimationEvent()`

주어진 매개변수로 `AnimationEvent`를 생성합니다.

속성
--

`Event` 인터페이스의 속성을 상속합니다.

`AnimationEvent.animationName` 읽기 전용

애니메이션을 생성한 `animation-name` (en-US)의 값을 담은 문자열입니다.

`AnimationEvent.elapsedTime` 읽기 전용

이 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지됐던 시간은 제외합니다. `animationstart` 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

`AnimationEvent.pseudoElement` 읽기 전용

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

메서드
---

`Event` 인터페이스의 메서드를 상속합니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`, `animation-composition` (en-US), `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes`


HTMLTitleElement - Web API

HTMLTitleElement
================

**`HTMLTitleElement`** 인터페이스는 문서의 제목을 담습니다. `HTMLElement` 인터페이스의 속성과 메서드를 상속합니다,

Properties
----------

*부모인 `HTMLElement`로부터 상속합니다.*

`HTMLTitleElement.text` (en-US)

문서의 제목을 나타내는 `DOMString`입니다.

메서드
---

*부모인 `HTMLElement`로부터 상속합니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmltitleelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<title>`.


AudioWorklet - Web API

AudioWorklet
============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Web Audio API의 **`AudioWorklet`** 인터페이스는 아주 낮은 레이턴시의 오디오 프로세싱을 제공하기 위해 별도의 스레드에서 실행되는 사용자 정의 오디오 프로세싱 스크립트를 제공하려는 목적으로 사용됩니다.

worklet의 코드는 worklet과 다른 오디오 노드에 의해 공유되는 별도의 Web Audio 스레드를 사용하며 `AudioWorkletGlobalScope` 전역 실행 컨텍스트에서 실행됩니다.

오디오 컨텍스트의 `AudioWorklet` 인스턴스에 `BaseAudioContext.audioWorklet` (en-US) 속성을 통해 접근합니다.

속성
--

*`AudioWorklet` 인터페이스는 자신이 소유하는 어떠한 속성도 정의하지 않으나, `Worklet` (en-US)의 속성을 상속받습니다.*

메서드
---

*이 인터페이스는 `Worklet` (en-US)으로부터 메서드를 상속받습니다. `AudioWorklet` 인터페이스는 자신이 소유하는 어떠한 메서드도 정의하지 않습니다.*

이벤트
---

*`AudioWorklet`은 응답하는 이벤트를 가지고 있지 않습니다.*

예제
--

`AudioWorkletNode`에서 사용자 정의 오디오 노드 생성에 대한 완전한 예제를 참고해 보세요.

명세
--

| Specification |
| --- |
| Web Audio API # AudioWorklet |

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

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

같이 보기
-----

* `AudioWorkletGlobalScope` — `AudioWorklet`의 전역 실행 컨텍스트
* Web Audio API
* Web Audio API 사용하기


HTMLVideoElement - Web API

HTMLVideoElement
================

**`HTMLVideoElement`** 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. `HTMLMediaElement`와 `HTMLElement`를 상속합니다.

지원하는 미디어 포맷 (en-US) 목록은 브라우저마다 다릅니다. 여러분은 적절한 범위의 브라우저에서 지원하는 한가지 비디어 포맷을 제공하던가, 지원할 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 합니다.

속성(Properties)
--------------

*`HTMLMediaElement`와* *`HTMLElement`의 속성들도 상속 받습니다.*

`HTMLVideoElement.height` (en-US)

표시 영역의 높이를 나타내는 HTML Attribute `height`의 값을 `DOMString`으로 반환합니다. 단위는 pixel입니다.

`HTMLVideoElement.poster`

비디오 데이터가 없을 때 보여줄 이미지를 지정하는 HTML Attribute `poster`의 값을 `DOMString`로 반환합니다.

`HTMLVideoElement.videoHeight` (en-US) 읽기 전용

비디오의 height를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.

`HTMLVideoElement.videoWidth` (en-US) 읽기 전용

비디오의 width를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.

`HTMLVideoElement.width` (en-US)

표시 영역의 높이를 나타내는 HTML Attribute `width`의 값을 `DOMString`으로 반환합니다. 단위는 pixel입니다.

### Gecko 전용 속성

`HTMLVideoElement.mozParsedFrames`
비표준
읽기 전용

미디어 소스에서 파싱된 비디오 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozDecodedFrames`
비표준
읽기 전용

화상으로 디코딩 된 비디오 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozPresentedFrames`
비표준
읽기 전용

렌더링 파이프 라인을 통해 출력된 디코드 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozPaintedFrames`
비표준
읽기 전용

화면에 그려진 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozFrameDelay`
비표준
읽기 전용

지연 출력된 비디오 프레임을 초 단위로 `double` 값으로 반환한다.

`HTMLVideoElement.mozHasAudio`
비표준
읽기 전용

비디오와 연관된 오디오 존재 여부를 `boolean` 값으로 반환한다.

### Microsoft 확장 속성

`HTMLVideoElement.msFrameStep()` (en-US)
비표준

프레임 단위로 앞/뒤로 이동합니다.

`HTMLVideoElement.msHorizontalMirror` (en-US)
비표준

비디오의 좌/우 반전 시키거나 반전된 상태를 반환합니다.

`HTMLVideoElement.msInsertVideoEffect()` (en-US)
비표준

미디어 파이프라인에 특정 비디오 효과를 추가합니다.

`HTMLVideoElement.msIsLayoutOptimalForPlayback` (en-US)
비표준
읽기 전용

더 효과적인 비디오 렌더링이 가능하면 true를 반환합니다.

`HTMLVideoElement.msIsStereo3D` (en-US)
비표준
읽기 전용

시스템이 비디오를 stereo 3-D로 판단하였는지 여부를 반환합니다. 값을 true로 지정한다면 video를 stereo 3-D로 인식합니다..

`HTMLVideoElement.msZoom` (en-US)
비표준

비디오 프레임을 출력부에 딱 맞게 트림합니다.

메소드
---

*`HTMLMediaElement`와 `HTMLElement`의 메소드도 상속 받습니다.*

`HTMLVideoElement.getVideoPlaybackQuality()` (en-US)
Experimental

현재 재생 결과를 담고 있는 `VideoPlaybackQuality` (en-US) 객체를 반환합니다. 전체 프레임 중 drop 되거나 손실된 프레임 등 재생 정보를 포함합니다.

Events
------

*`HTMLMediaElement`와 `HTMLElement`의 이벤트를 상속합니다.* `addEventListener()` 메소드 또는 `oneventname` 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmlvideoelement |

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

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

더 보기
----

* HTML 엘리먼트 구현체: `<video>`.
* Demo of video paint statistics(링크 소멸)
* 지원하는 미디어 포맷 (en-US)


Media Capture and Streams API (미디어 스트림) - Web API

Media Capture and Streams API (미디어 스트림)
=======================================

**Media Streams API**, 짧게는 **MediaStream API**라고 불리는 **Media Capture and Streams API**는 오디오와 비디오 데이터 스트리밍을 지원하는 WebRTC 관련 API 입니다. 이 API는 미디어 스트림과 스트림을 구성하는 트랙, 데이터 형식과 관련된 제한인자, 데이터를 비동기적으로 사용할 때의 성공과 오류 콜백, 그리고 이 과정에서 발생하는 이벤트에 대한 인터페이스 및 메서드를 제공합니다.

개념 및 사용법
--------

이 API는 오디오 혹은 비디오와 관련된 데이터를 나타내는 `MediaStream` (en-US) 객체 조작에 기반합니다.

`MediaStream`은 0개 이상의 `MediaStreamTrack` 객체로 구성되며, 각자 다양한 오디오와 비디오 **트랙**을 나타냅니다. 각각의 `MediaStreamTrack`은 하나 이상의 **채널**을 가질 수 있습니다. 채널은, 오디오로 예를 들면 스테레오 오디오 트랙에서의 "왼쪽"과 "오른쪽"처럼, 미디어 스트림의 제일 작은 단위를 나타냅니다.

`MediaStream` 객체는 하나의 **입력**과 하나의 **출력**을 가집니다. `getUserMedia()` (en-US)로 생성한 `MediaStream` 객체는 "로컬" 미디어 스트림이라고 부르며, 사용자의 카메라와 마이크 중 하나를 입력 출처로 사용합니다. 반면 `<video>`, `<audio>` (en-US)와 같은 미디어 요소, 네트워크에서 들어오는 스트림, WebRTC `RTCPeerConnection` (en-US) API로 획득한 스트림, Web Audio API `MediaStreamAudioSourceNode` (en-US)로 생성한 스트림 등은 비 로컬 `MediaStream`이라고 합니다.

`MediaStream` 객체의 출력은 **소비자**(컨슈머)로 연결됩니다. 소비자는 `<video>`, `<audio>` (en-US)와 같은 미디어 요소, WebRTC `RTCPeerConnection` (en-US) API, Web Audio API `MediaStreamAudioSourceNode` (en-US)가 가능합니다.

인터페이스
-----

아래의 참고 문서에서는 Media Capture and Streams API를 구성하는 인터페이스에 대한 기초적인 지식을 찾을 수 있습니다.

* `CanvasCaptureMediaStreamTrack` (en-US)
* `InputDeviceInfo` (en-US)
* `MediaDeviceKind`
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaStream` (en-US)
* `MediaStreamEvent` (en-US)
* `MediaStreamTrack`
* `MediaStreamTrackEvent` (en-US)
* `MediaTrackCapabilities`
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `NavigatorUserMedia`
* `NavigatorUserMediaError`
* `OverconstrainedError` (en-US)
* `URL`

Media Capture and Streams API의 초기 명세는 `MediaStreamTrack`에 기반한 별도의 `AudioStreamTrack`과 `VideoStreamTrack` 인터페이스를 포함했으며, 각자 오디오와 비디오 스트림을 따로 나타냈었습니다. 그러나 이런 구분은 더 이상 존재하지 않으며, 두 인터페이스를 사용하는 코드는 `MediaStreamTrack`을 직접 사용하도록 업데이트해야 합니다.

이벤트
---

* `addtrack` (en-US)
* `ended` (en-US)
* `mute` (en-US)
* `overconstrained` (en-US)
* `removetrack` (en-US)
* `unmute` (en-US)
브라우저 호환성
--------

### api.MediaStream

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

### api.MediaStreamTrack

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

### api.MediaDevices

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

### api.MediaDeviceInfo

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

### api.InputDeviceInfo

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

### api.CanvasCaptureMediaStreamTrack

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

같이 보기
-----

* WebRTC
* `mediaDevices.getUserMedia()` (en-US)


IdleDeadline - Web API

IdleDeadline
============

`IdleDeadline` 인터페이스는 `Window.requestIdleCallback()`을 호출하여 설정된 유휴 콜백(idle callback)에 대한 입력 매개변수(parameter)의 데이터 타입으로 사용됩니다. `timeRemaining()` (en-US) 메서드를 제공하여 사용자 에이전트가 유휴 상태로있을 것으로 추정하는 시간과 속성(property)인 `didTimeout`을 결정할 수있게하여, timeout 기간이 만료되어 콜백이 실행 중인지 여부를 결정할 수 있습니다.

request callback이 작동하는 방식에 대해 자세히알아 보려면, Collaborative Scheduling of Background Tasks 문서를 읽어보세요.

Properties
----------

`IdleDeadline.didTimeout` 읽기 전용
유휴 콜백을 구현할 때 지정한 timeout이 만료되었음에도 콜백이 실행중인 경우, 값이 true인 Boolean 입니다.
Methods
-------

`IdleDeadline.timeRemaining()` (en-US)
현재 유휴 기간(idle period)에 남아있는 밀리초 수를 예측하는 부동 소수점 값인 `DOMHighResTimeStamp` (en-US)를 반환합니다. 유휴 기간이 끝나면 값은 0 입니다. 우리의 콜백은 이것을 반복적으로 호출하여, 반환하기 전에 더 많은 작업을 할 수 있는 충분한 시간이 있는지 확인할 수 있습니다.

Example
-------

Cooperative Scheduling of Background Tasks API의 complete example를 참조하세요.

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-idledeadline-interface |

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

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

See also
--------

* Cooperative Scheduling of Background Tasks API
* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()` (en-US)


MutationRecord - Web API

MutationRecord
==============

`MutationRecord` 읽기 전용 인터페이스는 `MutationObserver`에 의해 감지된 각각의 변화를 나타냅니다. `MutationObserver`의 콜백 매개변수로 전달되는 배열의 요소로 사용됩니다.

인스턴스 속성
-------

`MutationRecord.addedNodes` (en-US) 읽기 전용

변경으로 인해 추가된 노드들입니다. 추가된 노드가 없으면 빈 `NodeList`입니다.

`MutationRecord.attributeName` (en-US) 읽기 전용

바뀐 특성의 이름을 나타내는 문자열 또는 `null`입니다.

`MutationRecord.attributeNamespace` (en-US) 읽기 전용

바뀐 특성의 네임스페이스를 나타내는 문자열 또는 `null`입니다.

`MutationRecord.nextSibling` (en-US) 읽기 전용

추가됐거나 제거된 노드의 다음 형제 또는 `null`입니다.

`MutationRecord.oldValue` (en-US) 읽기 전용

`MutationRecord.type` (en-US)에 따라 다른 값입니다.

* `attributes`라면 변경 전 특성의 값입니다.
* `characterData`라면 변경 전 노드의 텍스트 데이터입니다.
* `childList`라면 `null`입니다.

`MutationRecord.previousSibling` (en-US) 읽기 전용

추가됐거나 제거된 노드의 이전 형제 또는 `null`입니다.

`MutationRecord.removedNodes` (en-US) 읽기 전용

변경으로 인해 제거된 노드들입니다. 제거된 노드가 없으면 빈 `NodeList`입니다.

`MutationRecord.target` (en-US) 읽기 전용

변경된 노드입니다. `MutationRecord.type`에 따라 다른 값입니다.

* `attributes`라면 특성이 변경된 노드입니다.
* `characterData`라면 `CharacterData` 노드입니다.
* `childList`라면 자식이 변경된 노드입니다.

`MutationRecord.type` (en-US) 읽기 전용

변경 유형을 나타내는 문자열입니다. 특성 변경이면 `attributes`, `CharacterData` 노드 변경이면 `characterData`, 노드 트리의 변경이면 `childList`입니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-mutationrecord |

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

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


인코딩 API - Web API

인코딩 API
=======

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**인코딩 API**는 character encodings, UTF-8이 아닌 레거시 인코딩을 포함한 다양한 문자열을 제어할 수 있는 매커니즘을 제공한다.

인코딩 API는 4가지 인터페이스를 제공한다. `TextDecoder` (en-US), `TextEncoder` (en-US), `TextDecoderStream` (en-US), `TextEncoderStream` (en-US) 등 이다.

Interfaces
----------

* `TextDecoder` (en-US)
* `TextEncoder` (en-US)
* `TextDecoderStream` (en-US)
* `TextEncoderStream` (en-US)

Tutorials & tools
-----------------

* A shim allowing to use this interface in browsers that don't support it.
* `StringView` – a C-like representation of strings based on typed arrays.
명세서
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |
| Encoding Standard # interface-textencoder |
| Encoding Standard # interface-textencoderstream |
| Encoding Standard # interface-textdecoderstream |

Browser compatibility
---------------------

### `TextDecoder`

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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

### `TextEncoder`

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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


Notification - Web API

Notification
============

Notifications API의 `Notification` 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다.

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

Constructor
-----------

`Notification()` (en-US)

새 `Notification` 객체 인스턴스를 생성합니다.

Properties
----------

### Static properties

이 속성은 `Notification` 객체 안에만 존재합니다.

`Notification.permission` 읽기 전용

알림을 표시하기 위한 현재의 권한을 나타낸다. 가능한 값: `denied` (사용자가 알림 표시를 거절), `granted` (사용자가 알림 표시를 허용), `default` (사용자의 선택을 알 수 없기 때문에 브라우저가 거절한 상태의 값으로 작동하게됨).

### Instance properties

이 속성은 `Notification` 객체의 인스턴스 안에만 존재합니다.

`Notification.actions` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림의 액션 배열입니다.

`Notification.badge` (en-US) 읽기 전용

알림을 나타낼 충분한 여유 공간이 없을 때에 알림을 표시하는 이미지의 URL입니다.

`Notification.body` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림의 본문입니다.

`Notification.data` (en-US) 읽기 전용

알림 데이타의 구조화된 복사본을 반환합니다.

`Notification.dir` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림 글의 방향입니다.

`Notification.lang` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림의 언어 코드입니다.

`Notification.tag` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 경우 알림의 ID입니다.

`Notification.icon` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림의 아이콘으로 사용될 이미지의 URL입니다.

`Notification.image` (en-US) 읽기 전용

생성자의 옵션 파라메터 안에 명시된 알림의 일부분으로 표시될 이미지의 URL입니다.

`Notification.requireInteraction` (en-US) 읽기 전용

자동으로 닫히지 않고 사용자가 클릭할 때 까지 활성화 된 채로 남아 있어야 함을 나타내는 `Boolean` 값입니다.

`Notification.silent` (en-US) 읽기 전용

기기의 설정과 상관없이 소리가 없거나 진동이 울려야 한다는 등 알림이 조용해야 하는지를 나타냅니다.

`Notification.timestamp` (en-US) 읽기 전용

알림이 생성되었거나 적용 가능한(과거, 현재, 미래) 시간을 나타냅니다.

`Notification.title` (en-US) 읽기 전용

생성자의 첫번째 파라메터에 명시된 알림의 제목입니다.

`Notification.vibrate` (en-US) 읽기 전용

진동기가 있는 기기가 나타내야할 진동 패턴을 나타냅니다.

#### Unsupported properties

아래의 속성은 최신 명세에는 등록되어 있지만 아직 구현한 브라우저가 없는 속성입니다. 현재의 상태에서 변경된 사항은 없는지 계속 확인해보아야 하는 내용이고 오래된 내용이 있으면 알려주시기 바랍니다.

`Notification.noscreen` 읽기 전용

알림이 기기의 화면을 활성화해야 하는지를 나타냅니다.

`Notification.renotify` (en-US) 읽기 전용

새 알림이 오래된 알림을 교체할 때 사용자에게 알려야 하는지를 나타냅니다.

`Notification.sound` 읽기 전용

기본 시스템 설정 알림 소리를 대신할 알림 소리로 사용될 소리 자원을 나타냅니다.

`Notification.sticky` 읽기 전용

사용자가 쉽게 제거할 수 없게 '달라붙어'있어야 하는지를 나타냅니다.

#### Event handlers

`Notification.onclick` (en-US)

`click` 이벤트에 대한 핸들러입니다. 사용자가 알림을 클릭할 때 마다 호출됩니다.

`Notification.onerror` (en-US)

`error (en-US)` 이벤트에 대한 핸들러입니다. 알림에 오류가 발생할 때 마다 호출됩니다.

#### Obsolete handlers

아래의 이벤트 핸들러는 browser compatibility 섹션에 나타난 대로 아직 지원되지만 현재 명세에 없는 내용입니다. 폐지된 것으로 생각해야 하고 앞으로 나올 브라우저에서는 작동하지 않을 수 있습니다.

`Notification.onclose` (en-US)

`close` 이벤트에 대한 핸들러입니다. 사용자가 알림을 닫을 때 호출됩니다.

`Notification.onshow` (en-US)

`show` 이벤트에 대한 핸들러입니다. 알림이 표시될 때 호출됩니다.

Methods
-------

### Static methods

이 메서드는 `Notification` 객체에만 존재합니다.

`Notification.requestPermission()` (en-US)

이 메서드는 페이지에서 알림을 표시할지 요청하는데 사용됩니다.

### Instance methods

이 메서드는 `Notification` 객체의 인스턴스나 그 `prototype`에만 존재합니다. `Notification` 객체는 또한 `EventTarget` 인터페이스를 상속 받습니다.

`Notification.close()` (en-US)

프로그램으로 알림을 닫습니다.

Example
-------

다음과 같은 기본 HTML이 있을 때:

```html
<button onclick="notifyMe()">Notify me!</button>
```

다음과 같이 알림을 보낼 수 있습니다. 알림이 지원되는지 우선 확인해 볼 때 사용할 수 있는 풍부하게 완성된 예제코드입니다. 그 다음에 현재 페이지에서 알림을 보낼 수 있게 권한이 있는지를 확인하고 알림을 보내기 전에 권한이 필요하면 요청을 합니다.

```js
function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them any more.
}
```

많은 경우에 이렇게 장황할 필요는 없습니다. 예를 들어 Emogotchi 데모(소스코드)에서는 단순히 알림을 보내기 위해서 권한을 얻을 수 있는지와 상관없이 `Notification.requestPermission` (en-US)를 실행합니다(이 경우는 새로운 프로미스 기반 메서드 문법을 사용):

```js
Notification.requestPermission().then(function (result) {
  console.log(result);
});
```

그 다음에 알림이 필요한 때에 단순히 `spawnNotification()` 함수를 실행합니다. 본문과 아이콘, 제목을 인자로 넘기면 필요한 `options` 객체를 만들고 `Notification()` (en-US) 생성자를 사용해서 알림을 발생시킵니다.

```js
function spawnNotification(theBody, theIcon, theTitle) {
  var options = {
    body: theBody,
    icon: theIcon,
  };
  var n = new Notification(theTitle, options);
}
```

명세서
---

| Specification |
| --- |
| Notifications API Standard # api |

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

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

See also
--------

* Using the Notifications API


RTCDataChannelEvent - Web API

RTCDataChannelEvent
===================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCDataChannelEvent()`** 생성자는 `datachannel`을 나타내는 신규 `RTCDataChannelEvent` 객체를 반환합니다. 이 이벤트는 두 피어 사이에서 원격 피어가 `RTCDataChannel` (en-US)을 개통하도록 요청되었을때, `RTCPeerConnection` (en-US) 에 전달됩니다.

WebRTC가 적절한 시기에 생성하고 전달해주기 때문에, `RTCDataChannelEvent`를 직접 생성하는 일은 매우 드물 것입니다. `RTCPeerConnection`에 의해 `datachannel` 이벤트가 받아지는지를 감청하고, 해당 이벤트를 받으면 `RTCDataChannelEvent.channel` 속성을 사용해서 개통된 데이터 채널에 대한 권한을 얻는 것이 일반적입니다.

생성자
---

`RTCDataChannelEvent()`

새로운 `RTCDataChannelEvent`을 생성하는 **`RTCDataChannelEvent()`** 생성자입니다.

속성
--

*`Event`의 속성을 상속합니다.*

`RTCDataChannelEvent.channel` 읽기 전용

읽기 속성인 **`RTCDataChannelEvent.channel`** 는 이벤트와 관련된 RTCDataChannel를 반환합니다.

메소드
---

이 인터페이스에는 메소드가 존재하지 않습니다. 대신, \*`Event`\*의 메소드를 상속합니다.

예시
--

아래의 예제에서는 `datachannel` 이벤트 핸들러를 설정해서 데이터 채널의 참조된 정보를 저장하고, 모니터링 할 이벤트들에 대한 핸들러를 새로 설정합니다. `channel` 속성은 다른 피어와의 연결을 나타내는 `RTCDataChannel` (en-US)을 제공합니다.

```js
pc.ondatachannel = function (event) {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

데이터 채널을 어떤 방식으로 사용하는지에 대한 더 좋은 예제는 A simple RTCDataChannel sample (en-US)를 확인하십시오.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannelevent |

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

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

참조
--

* WebRTC (en-US)
* `RTCDataChannel` (en-US)
* `RTCDataChannel.ondatachannel`
* A simple RTCDataChannel sample (en-US)
* `RTCPeerConnection` (en-US) (the target interface for `datachannel` events)


CSS Counter Styles - Web API

CSS Counter Styles
==================

CSS Counter Styles 모듈은 사용자 정의 카운터 스타일을 정의할 수 있게 해 주며, 이를 CSS 목록 마커 및 생성된 콘텐츠 카운터에 사용할 수 있습니다.

인터페이스
-----

`CSSCounterStyleRule` (en-US)

`@counter-style` (en-US) 규칙을 나타냅니다..

명세서
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-csscounterstylerule-interface |

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

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

같이 보기
-----

* CSS 카운터 사용하기


File and Directory Entries API - Web API

File and Directory Entries API
==============================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

The File and Directory Entries API는 탐색 및 파일 접근이 가능한 로컬 파일 시스템을 웹상에 시뮬레이션합니다. 이 API를 통해 당신은 읽고, 쓰고, 파일과 디렉토리를 생성할 수 있는 가상의 파일 시스템을 가진 앱을 개발할 수 있을 것입니다.

**참고:** 이 API는 아직 표준이 아니기 때문에, 모든 브라우저가 이를 지원하지 않는 다는 점을 유념하십시오. 지원하더라도 일부 기능만을 지원할 수도 있습니다. 자세한 내용은 브라우저 호환성(Browser compatibility) 항목을 참조하십시오.

동기적 혹은 비동기적인 동작 중 어느 쪽을 필요로 하냐에 따라 만들어진 매우 유사한 두 개의 API가 있습니다. 동기식 API는 `Worker` 내에서 사용될 수 있도록 확장되어 왔으며 당신이 원하는 값을 반환합니다. 비동기식 API는 브라우저의 동작을 방해하지 않지만 함수와 API가 값을 반환하지 않습니다; 그 대신, 당신은 콜백 함수를 이용해 언제든 응답을 처리할 수 있습니다.

**경고:** Firefox에 내장된 File and Directory Entries API는 매우 제한적입니다; 해당 환경에서는 파일 생성을 사용할 수 없습니다. `<input>` (en-US)이나 (`HTMLInputElement` (en-US) 도 확인하십시오) 앱이나 웹사이트에서 드래그 앤 드롭(drag and drop)을 통해 유저가 직접 선택한 파일에만 액세스 가능합니다. 또한 Firefox는 동기식 API 역시 지원하지 않습니다. API의 어떤 부분을 사용하려고 하든 반드시 브라우저 호환성을 확인하시고, Firefox에 대한 이 API의 호환성(File and Directory Entries API support in Firefox (en-US))을 통해 더 자세하게 알아보도록 하십시오.

파일 시스템에 접근하기
------------

현재로서 정의된 파일 시스템에 대한 접근 방법은 두 가지입니다:

* 드래그 앤 드롭(`drop` (en-US)) 이벤트를 제어함으로써, 당신은 `DataTransferItem.webkitGetAsEntry()` (en-US) 를 통해`FileSystemEntry` (en-US)에 드롭한 파일을 전달할 수 있습니다. 만일 결과가 `null`이 아니라면, 드롭한 파일 혹은 디렉토리를 파일 시스템에서 사용할 수 있을 것입니다.
* `HTMLInputElement.webkitEntries` (en-US) 속성은 당신이 `FileSystemFileEntry` (en-US) 객체에 현재 선택된 파일을 접근시킬 수 있게 하지만, 파일 선택기(File chooser)로 직접 드래그 앤 드롭한 경우에만 가능합니다. (Firefox bug 1326031). 만일 `HTMLInputElement.webkitdirectory` (en-US)의 값을 `true`로 두었다면, 디렉토리 선택자(Directory picker) 대신 `<input>` (en-US) 를 사용할 수 있고, 선택된 각 디렉토리에 대해 `FileSystemDirectoryEntry` (en-US) 객체로 만들 수 있습니다.
비동기식 API
--------

파일 시스템 액세스가 메인 스레드에서 사용될 경우 전체 브라우저를 차단하지 않도록 대부분의 작업은 비동기 API를 이용하여야 합니다. 다음과 같은 인터페이스를 포함하고 있습니다:

`FileSystem` (en-US)

파일 시스템을 나타냅니다.

`FileSystemEntry` (en-US)

파일 시스템의 단일 엔트리를 의미하는 기본적인 인터페이스입니다. 이것은 파일이나 디렉토리 등을 나타내는 다른 인터페이스들에 의해 구현됩니다.

`FileSystemFileEntry` (en-US)

파일 시스템 내의 단일 파일을 나타냅니다.

`FileSystemDirectoryEntry` (en-US)

파일 시스템 내의 단일 디렉토리를 나타냅니다.

`FileSystemDirectoryReader` (en-US)

`FileSystemDirectoryEntry.createReader()` (en-US)를 호출함으로써 만들어지는 인터페이스이며, 디렉토리의 내용물을 읽을 수 있는 기능을 제공합니다.

`FileSystemFlags` (en-US)

File and Directory Entries API에서 특정 메소드를 호출할 때 옵션 플래그로 사용되는 값들의 집합을 정의합니다.

`FileError`
지원이 중단되었습니다

비동기 파일 시스템 호출에 의해 발생한 에러를 나타냅니다.

또한 두 개의 전역 함수가 있습니다(현재로선 명세화되지 않아 Google Chrome에만 내장되어 있습니다). `Window` 객체 위에서 사용 가능하며 `LocalFileSystem` (en-US)에 구현되어 있습니다: 각각 `requestFileSystem()` 과 `resolveLocalFileSystemURL()`.

동기식 API
-------

동기식 API는 반드시 `Worker`s 안에서만 사용되어야 합니다; 이 호출들은 그들이 실행이 완료될 때 까지 브라우저의 동작을 멈추며, 콜백을 보내는 대신 단순히 결과값을 반환합니다. 이 함수들을 메인 스레드에서 사용하는 것은 브라우저의 동작을 멈출 것이며, 그것은 너무 난잡한 방식입니다. 아래의 인터페이스들은 비동기식 API와 기능적으로 거의 유사합니다.

`FileSystemSync` (en-US)

파일 시스템을 나타냅니다.

`FileSystemEntrySync` (en-US)

파일 시스템의 단일 엔트리를 의미하는 기본적인 인터페이스입니다. 이것은 파일이나 디렉토리 등을 나타내는 다른 인터페이스들에 의해 구현됩니다.

`FileSystemFileEntrySync`

파일 시스템 내의 단일 파일을 나타냅니다.

`FileSystemDirectoryEntrySync`

파일 시스템 내의 단일 디렉토리를 나타냅니다.

`FileSystemDirectoryReaderSync`

`FileSystemDirectoryEntrySync.createReader()`를 호출함으로써 만들어지는 인터페이스이며, 디렉토리의 내용물을 읽을 수 있는 기능을 제공합니다.

`FileException` (en-US)
지원이 중단되었습니다

동기 파일 시스템 호출에 의해 발생한 에러를 나타냅니다.

또한 두 개의 전역 함수가 있습니다(현재로선 명세화되지 않아 Google Chrome에만 내장되어 있습니다). `Worker` 객체 위에서 사용 가능하며 `LocalFileSystemSync` (en-US)에 구현되어 있습니다: 각각 `requestFileSystemSync()` 과 `resolveLocalFileSystemSyncURL()`.

기타 인터페이스
--------

`LocalFileSystem` (en-US)
샌드박스 파일 시스템에 접근할 수 있습니다.
`LocalFileSystemSync` (en-US)

`LockedFile` (en-US)
필요한 모든 잠금을 사용하여 주어진 파일을 처리할 수 있는 도구를 제공합니다.
`Metadata` (en-US)
Experimental

명세
--

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

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

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

같이 보기
-----

* File and Directory Entries API 소개(Introduction to the File and Directory Entries API (en-US))
* Firefox에 대한 File and Directory Etnries API의 호환성(File and Directory Entries API support in Firefox (en-US))