설명
Introduced in HTML5
The audio element is used to embed sound content in an HTML or XHTML document. The audio element was added as part of HTML5.
audio 요소는 HTML, XHTML 문서에 사운드 콘텐츠를 포함시키는데 사용된다. audio 요소는 HTML5의 일부로 추가 되었다.
You can use the enhanced audio API features — which are Gecko-specific — to directly generate and manipulate audio streams from JavaScript code. See Introducing the audio API extension for details.
(Gecko-specific) 향산된 audio API를 사용해 자바스크립트 코드에서 직접 오디오 스트림을 생성하고 조작할 수 있다. Introducing the audio API extension에서 자세한 정보를 확인할 수 있다.
Usage Context
| Permitted content |
Transparent content model, containing either a src attribute or one or more <source> elements, followed by either flow content or phrasing content , with no <video> or <audio> elements. |
| Tag omission | None, both start and end tags must be present |
| Permitted parent elements | Any element that accepts flow content, or any element that accepts Phrasing content. |
| Normative document | HTML5, section 4.8.7 |
속성
Like all other HTML elements, this element supports the global attributes.
이 요소는 전역속성을 지원한다
autoplay
A Boolean attribute; if specified (even if the value is "false"!), the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
Boolean 속성.
값이 'true'이든 'false'이든, autoplay 속성이 지정되기만 하면 데이터가 완전히 로드되지 않은 상태에서도 가능한 범위내에서 자동으로 재생을 시작한다.
autobuffer
A Boolean attribute; if specified, the audio will automatically begin being downloaded, even if not set to automatically play. This continues until the media cache is full, or the entire audio file has been downloaded, whichever comes first. This should only be used when it is expected that the user will choose to play the audio; for example, if the user has navigated to a page using a "Play this audio" link. This attribute was removed in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) in favor of the preload attribute.
Boolean 속성.
이 속성을 지정한 경우, 오디오가 자동재생하도록 설정되어 있지 않더라도 자동으로 다운로드를 시작한다. 이것은 미디어 캐쉬가 가득 차거나, 오디오파일이 완전히 다운로드 될때까지 계속된다. 이 속성은 사용자가 오디오를 재생할 것이라고 예측될 경우에만 사용해야 한다. (사용자가 "오디오 재생" 링크를 통해 페이지를 접근하였을 경우 등)
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)부터는 'preload' 속성을 사용하도록 변경되어, autobuffer 속성은 삭제되었다.
buffered
An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.
이 속성을 통해 미디어의 재생구간 중 버퍼가 완료된 부분들을 확인 할 수 있다.
이 속성은 TimeRanges 오브젝트를 포함한다.
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/ 참고.
controls
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
이 속성이 존재할 경우, 브라우저는 사용자가 오디오 재생을 제어할 수 있도록 컨트롤을 제공한다. 컨트롤을 통해 볼륨조정, 구간탐색, 일시정지 및 다시시작을 할 수 있다.
loop
A Boolean attribute; if specified, we will, upon reaching the end of the audio, automatically seek back to the start.
Boolean 속성.
이 속성을 지정한 경우, 오디오를 반복 재생한다.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
이 속성은 최상의 사용자 경험을 위해 브라우저에 힌트를 제공하기 위한 것이다. 브라우저에게 웹페이지의 저자가 가장 좋다고 판단한 방식이 무엇인지 알려준다.
이 속성은 다음 중 하나의 값을 갖는다.
- none: hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached;
- metadata: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable;
- auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it;
- the empty string: which is a synonym of the auto value.
- none: 사용자가 해당 오디오를 재생하지 않을것이라 판단되거나 서버트래픽의 최소화를 원할때 사용. 오디오를 캐시하지 않는다.
- metadata: 사용자가 해당 오디오를 재생하지 않을 것이라 판단되지만, 메타데이터(length 등)을 가져오는 것은 합리적임.
- auto: 사용자의 요구가 우선. 사용자가 오디오를 재생할 것으로 예상되지 않더라도, 필요한 경우 전체 동영상이 다운로드될 수 있다.
- the empty string: 'auto'와 같은 의미
If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to metadata.
속성이 설정되지 않은 경우, 기본값은 브라우저에 따라 다르다. 명세에서는 preload값을 metadata로 설정할 것을 권고한다.
Usage notes:
The autoplay attribute has precedence over this one as if one wants to automatically play a video, the browser will obviously need to download it. Setting both the autoplay and the preload attributes is allowed by the specification.
The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.
사용 참고 사항
- 'autoplay' 속성이 preload 보다 우선적으로 적용된한다. 자동으로 오디오를 재생하고자 할 때, 브라우저는 해당 오디오를 다운로드 해야할 것이 확실하기 때문이다. 'autoplay' 속성과 'preload' 속성을 모두 설정하는것은 명세에 의해 허용된다.
- 브라우저가 이 속성의 값을 따르도록 명세에 의해 강제되지 않는다. 단순한 힌트(권유)일 뿐이다.
src
The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the source element within the audio block to specify the audio to embed.
포함하는 오디오의 URL이다. HTTP 접근 제어를 받으며 선택적이다. 이 속성을 사용하는 대신에 해당 'audio' 요소블럭 내부에 'source' 요소를사용할 수 도 있다.
Time offsets are specified as float values indicating the number of seconds to offset.
Time offset은 초단위의 오프셋을 실수 단위로 표현한 값이다.
참고 : The time offset value definition has not yet been completed in the HTML5 specification and is subject to change.
참고: time offset 값은아직 HTML5 명세서에 완전하게 정의 되지 않았으며 변경될 수 있다.
예제
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
DOM Interface
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 3.0 | 3.5(1.9.1) | 9.0 | 10.5 | 3.1 |
| autoplay 속성 | 3.0 | 3.5(1.91.) | 9.0 | 10.5 | 3.1 |
| buffered 속성 | ? | 4.0 (2.) | ? | ? | ? |
| controls 속성 | 3.0 | 3.5(1.9.1) | 9.0 | 10.5 | 3.1 |
| loop 속성 | 3.0 | 9.0 | 10.5 | 3.1 | |
| preload 속성 | 3.0 | 4.0(2.0) | 9.0 |
Supported under the older name autobuffer |
3.1 |
| src 속성 | 3.0 | 3.5(1.9.1) | 9.0 | 10.5 | 3.1 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | ? | 1.0 (1.0) | ? | ? | ? |
| autoplay 속성 | ? | 1.0 (1.0) | ? | ? | ? |
| buffered 속성 | ? | 4.0 (2.0) | ? | ? | ? |
| controls 속성 | ? | 1.0 (1.0) | ? | ? | ? |
| loop 속성 | ? | ? | ? | ? | |
| preload 속성 | ? | 4.0 (2.) | ? | ? | ? |
| src 속성 | ? | 1.0 (1.0) | ? | ? | ? |
