<audio>를 알아보자! > 웹개발

본문 바로가기

회원메뉴

  

쇼핑몰 검색

회원로그인

오늘 본 상품

없음

웹개발

<audio>를 알아보자!

페이지 정보

작성자 인셀러 작성일18-11-19 21:24 조회45회 댓글0건

본문

<audio>  




개요

HTML <audio> 요소는 문서에 소리 컨텐츠를 포함하기 위해 사용됩니다.

이것은 src 속성이나 <source> 요소를 통해 여러 오디오 소스를 포함할 수 있으며, 브라우저는 그중에 가장 적합한 소스를 고릅니다.

<audio> 요소를 지원하지 않는 브라우저를 위해 대체 컨텐츠를 추가할 수도 있습니다.

웹 오디오 API를 사용하여 JavaScript 코드에서 오디오 스트림을 직접 생성하고 조작할 수 있습니다. 





사용 문맥

컨텐츠 범주 : 플로우 컨텐츠, 구문 컨텐츠, 포함된 컨텐츠.

만약 controls 속성을 가지고 있다면 : 대화형 컨텐츠, palpable 컨텐츠.

허용된 부모 요소 : 포함된 컨텐츠를 허용하는 모든 요소





속성

이 요소는 전역 속성만을 포함합니다.


autoplay

Boolean 속성; 지정된 경우("false"!) 오디오가 데이터 로드를 중지하지 않고 바로 재생, 시작됩니다.


buffered

읽을 수 있는 속성으로, 버퍼링된 미디어의 시간 범위를 확인할 수 있으며, 이 속성에는 TimeRanges 개체가 포함되어 있습니다.


controls

이 특성이 있으면 브라우저는 사용자가 볼륨, 검색 및 일시 중지/재개 재생을 포함한 오디오 재생을 제어할 수 있는 컨트롤을 제공합니다.


loop

Boolean 속성. 지정된 경우 오디오 끝에 도달하면 자동으로 시작 부분으로 되돌아갑니다.


muted

Boolean 오디오가 처음에 음소거되는지 여부를 나타내는 속성. 기본값은 false이며, 이는 오디오가 재생됨을 의미합니다.


played

재생된 오디오의 모든 범위를 나타내는 TimeRanges 객체.


preload

이 열거된 특성은 브라우저에 작성자가 최상의 사용자 환경으로 이어질 것이라고 생각하는 것에 대한 힌트를 제공하기 위한 것으로 이 값은 다음 값 중 하나일 수 있습니다.


- none : 사용자가 해당 오디오를 참조할 필요가 없거나 서버의 트래픽을 최소화하고자 한다고 생각한다는 힌트입니다. 다른 말로 이 힌트는 오디오를 캐시해서는 안 된다는 것을 나타냅니다.

- metadata : 사용자가 해당 오디오를 참조할 필요가 없다고 생각하더라도 메타데이터(예: 길이)를 가져오는 것이 합리적입니다.

- auto : 사용자에게 우선권이 있음을 암시, 다른 말로 하면  사용자가 오디오를 사용하지 않을 것을 예상해도 전체 오디오를 다운로드할 수 있음을 나타냅니다.

- the empty string : 자동 값과 동의어입니다.


설정되지 않은 경우 기본값은 브라우저 정의 값(즉, 각 브라우저는 자체 기본값을 선택할 수 있음)이지만 규격에 따라 메타데이터로 설정할 것을 권장합니다.


- 사용 참고

-- 자동 실행 특성이 이 속성보다 우선합니다. 마치 오디오를 자동으로 재생하려는 것처럼 브라우저가 이 속성을 다운로드해야 합니다. 사양에 따라 자동 실행 및 프리로드 특성을 모두 설정할 수 있습니다.

-- 브라우저는 규격에 의해 이 속성의 값을 따르도록 강요되지 않습니다. 단지 암시일 뿐입니다.



src

포함될 오디오의 URL. 이 경우 HTTP 액세스 제어가 적용됩니다. 이는 선택 사항입니다. 대신 오디오 블록 내의 <소스> 요소를 사용하여 포함할 오디오를 지정할 수 있습니다.



volume

범위의 오디오 부분의 재생 볼륨. 0.0 (silent) to 1.0 (loudest).

시간 오프셋은 오프셋할 시간(초)을 나타내는 부동 값으로 지정됩니다.

- Note: 시간 오프셋 값 정의는 HTML5 규격에서 아직 완료되지 않았으며 변경될 수 있습니다.




이벤트

audio 요소는 events를 발생시킬수 있습니다.





예제


* 기본적인 사용법


<!-- 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>




* source 요소와 함께 사용한 audio 요소


<audio controls="controls">

  Your browser does not support the <code>audio</code> element.

  <source src="foo.wav" type="audio/wav">

</audio>


댓글목록

등록된 댓글이 없습니다.

인셀터 파트너
회사소개 서비스이용약관 개인정보취급방침 공지사항 제휴문의 고객문의
  • 고객센터
    Tel : 070 - 4140 - 1302
    Time : am10:00 ~ pm6:00

    고객문의 게시판
    카카오톡 문의 : sopen
  • 입금계좌안내
    신한은행 : 110-450-941860
    하나은행 : 642-910643-16407
    예금주 : 에스오픈(신광태)
  • 사이트명 : 인셀러,     회사명 : 에스오픈
    사업자 등록번호 : 314-07-45623
    통신판매업신고번호 : 2018-대전중구-0441
    주소 : 대전광역시 중구 동서대로 1180, 2F (태평동 414-1)
    전화 : 070-4140-1302
    이메일 : sopen2011@naver.com
    대표&개인정보관리책임자 : 신광태