html/css 독학하기

코스 전체목록

닫기

audio

설명

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

HTMLAudioElement

호환성

Desktop
기능 구글크롬 파이어폭스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
Mobile
기능 안드로이드 파이어폭스 모바일(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) ? ? ?

참고

댓글

댓글 본문
  1. engfordev
    확인 감사요 ^^
    대화보기
    • 진우
      넵~ 수정했습니다 답변이 늦어 죄송해요..
      대화보기
      • 진우
        에고^^; 이제야 살펴봤네요..말씀하신 부분들 적용했습니다.. 문맥만 좀 다듬었구요,preload 쪽은 좀 더 생각해 봐야 할 것 같네요~의견 고맙습니다 ;)
        대화보기
        • Toby 윤원진
          '엘리먼트' 보다는 번역샘플에 제시된 것 처럼 '요소'라는 한글 표현을 사용하면 좋을 것 같네요
        • engfordev
          수고가 많으십니다~ 눈으로는 보면서 생각은 했는데, 댓글을 이제야 드리네요 ㅎㅎ
          한번 살펴보시고, 적절하게 적용해 주세요 ^^
          동의하지 않으시거나 의문이 드는 부분은 다시 댓글 주시면 감사드릴게요~
          1.loop는 말씀하신대로 오디오를 반복재생한다.. 라고 표현해도 좋을 것 같은데요?
          2. 훔.. metadata가 어떤 것일지..그리고 metadata로 설정하는 방법은 어떤 방법일지..
          (제가 궁금해서 일단 질문 써둡니다 :))
          spec <- HTML specification(HTML 명세서)를 의미하는 게 아닐까요?
          명세에서는 metadata로 설정할 것을 권고하고 있다.
          >> 명세에서는 preload값을 metadata로 설정할 것을 권고한다.
          3. preload 속성부분에서요..
          enumerated attribute >> 어케 표현해야 할지.. (용어사전에 질문으로 올려두었어요.)
          >> 이 속성은 브라우저에게 힌트를 주기 위해 사용합니다. 이 속성은 다음 중 하나의 값을 가지며, 웹페이지를 만든 이가 가장 좋다고 생각하는 audio 재생방식이 무엇인지를 알려주는 역할을 합니다. (의미 전달이 정확하게 된건지 저도 좀 확실치 않네요 ^^)
          autoplay 속성이 proload 속성값보다 우선적으로 적용된다.
          4. float values(부동소수점으로 표현한 값?)
          float values -> 용어사전에 질문으로 추가해둘게요~https://docs.google.com/spread...
          5. autoplay 부분..
          >> 저는 이렇게 이해하고 번역해봤어요 ~
          autoplay의 값이 true이든, false이든, 값이 지정되있기만 하면 audio 요소는 아직 파일을 다 로드하지 않은 상태이더라도, 재생할 수 있는 상태가 되면 자동으로 재생하기 시작한다.
          6. autobuffer부분..
          This attribute was removed in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) in favor of the preload attribute.
          Gecko 2.0(.... ) 부터는 preload 속성을 사용할 수 있도록 autobuffer속성은 삭제되었다.
        버전 관리
        진우
        현재 버전
        선택 버전
        graphittie 자세히 보기