정보실

웹학교

정보실

html HTML`audio` 태그

본문

오디오 태그를 사용하면 HTML 페이지에 오디오 내용을 포함 시킬 수 있습니다.


이 요소는 getUserMedia()를 통해 마이크를 사용하여 오디오를 스트리밍하거나 src 속성을 사용하여 참조하는 오디오 소스를 재생할 수 있습니다.


<audio src="file.mp3" />


기본적으로 브라우저에는 이 요소에 대한 컨트롤이 표시되지 않습니다. 즉, 자동 재생 (나중에 자세히 설명)으로 설정 한 경우에만 오디오가 재생되고 사용자는 중지하는 방법을 보거나 볼륨을 제어하거나 트랙을 이동하는 방법을 볼 수 없습니다.


내장 컨트롤을 표시하기 위해 controls 속성을 추가 할 수 있습니다.

<audio src="file.mp3" controls />


컨트롤은 사용자 정의 스킨을 가질 수 있습니다.


type 속성을 사용하여 오디오 파일의 MIME 유형을 지정할 수 있습니다. 설정하지 않으면 브라우저가 자동으로 확인하려고 합니다.

<audio src="file.mp3" controls type="audio/mpeg" />


기본적으로 오디오 파일은 자동으로 재생되지 않습니다. 자동 재생 속성을 추가하여 오디오를 자동으로 재생하십시오.

<audio src="file.mp3" controls autoplay />

참고 : 모바일 브라우저는 자동 재생을 허용하지 않습니다 


loop 속성은 설정된 경우 0:00에 오디오 재생을 다시 시작합니다. 그렇지 않으면 오디오가 파일의 끝에서 중지됩니다.

<audio src="file.mp3" controls autoplay loop />


음소거 속성을 사용하여 음소거 된 오디오 파일을 재생할 수도 있습니다 (실제로 유용한 기능이 무엇인지 확실하지 않음).

<audio src="file.mp3" controls autoplay loop muted />


JavaScript를 사용하면 오디오 요소에서 발생하는 다양한 이벤트를 들을 수 있습니다. 가장 기본적인 것은 다음과 같습니다.

  • play 파일 재생이 시작될 때
  • pause 오디오 재생이 일시 정지되었을 때
  • playing 오디오가 일시 정지에서 다시 시작될 때
  • ended 오디오 파일의 끝에 도달했을 때






  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 39회 ]  작성일19-08-16 15:27

웹학교