HTML5 audio 태그의 주요 속성과 사용법 총정리

HTML5의 <audio> 태그는 외부 플러그인 없이 웹 페이지에 오디오 파일을 삽입하고 재생할 수 있게 해주는 표준 요소입니다. 이 태그는 다양한 속성(attribute)을 활용해 재생 방식, 컨트롤 UI 표시 여부 등 세부 동작을 자유롭게 제어할 수 있습니다.

<audio> 태그의 주요 속성

번호	속성	설명
1	autoplay	불리언(boolean) 속성입니다. 지정하면 데이터 로딩이 완료되기를 기다리지 않고, 재생 가능한 시점이 되는 즉시 오디오가 자동으로 재생됩니다.
2	autobuffer	불리언 속성입니다. 자동 재생(autoplay)이 설정되어 있지 않더라도 오디오 버퍼링을 미리 시작합니다.
3	controls	이 속성이 지정되면 사용자가 음량 조절, 구간 이동(seek), 일시정지 및 재개 등 오디오 재생을 직접 제어할 수 있는 컨트롤 UI가 화면에 표시됩니다.
4	loop	불리언 속성입니다. 지정하면 오디오가 끝까지 재생된 후 자동으로 처음 위치로 되돌아가 반복 재생됩니다.
5	preload	페이지가 로드되는 시점에 오디오를 미리 불러와 언제든 바로 재생할 수 있도록 준비합니다. 단, autoplay 속성이 함께 지정된 경우 이 속성은 무시됩니다.
6	src	삽입할 오디오 파일의 URL을 지정합니다. 필수 속성은 아니며, 대신 `<source>` 요소를 사용해 여러 형식의 오디오 소스를 지정할 수도 있습니다.

다음은 controls 속성과 <source> 요소를 함께 활용한 전형적인 작성 예시입니다.

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  사용 중인 브라우저는 audio 태그를 지원하지 않습니다.
</audio>

autoplay 주의: 사용자 경험을 해칠 수 있어 최신 브라우저에서는 음소거(muted) 상태가 아니면 자동 재생이 차단되는 경우가 많습니다.
브라우저 호환성: MP3, OGG 등 서로 다른 형식의 <source>를 함께 제공하면 다양한 브라우저에서 안정적으로 재생됩니다.
autobuffer의 현재 상태: 이 속성은 초기 HTML5 명세에 포함되었으나, 현재는 더 세밀한 제어가 가능한 preload 속성으로 대체되었습니다.