HTML5 audio — controls 기본 완전 정리

 

 

Web Development · HTML5 Audio

HTML5 audio —
controls로 재생 컨트롤 표시하기

Flash 없이 표준 HTML로 오디오 재생하는 가장 단순한 방법

시작 오늘 분석할 코드

HTML5의 audio 태그 한 줄로 오디오 재생 UI를 만들 수 있다. controls 속성을 붙이면 브라우저가 표준 컨트롤 바(재생·정지·볼륨)를 자동 표시한다.

<audio src="media/bgsound.mp3" controls></audio> <div class="top"></div> /* CSS */ .top { width: 600px; height: 300px; background: url(images/bg2.jpg) no-repeat top left; background-size: cover; }

실제 출력 미리보기

※ 위 컨트롤은 src가 없어 재생되지 않지만, 브라우저가 표준 audio UI를 어떻게 그리는지 볼 수 있다.

용어 용어 정리

<audio>HTML5의 표준 오디오 태그

controls브라우저 기본 컨트롤 표시 — 재생/볼륨

src오디오 파일 경로

audio/mpegMP3의 MIME 타입

background-size: cover배경 이미지를 영역에 맞춰 꽉 채움

no-repeat배경 반복 없음 (한 번만)

---

1 audio 태그의 기본 구조

/* 한 가지 포맷만 (간단) */ <audio src="sound.mp3" controls></audio> /* 여러 포맷 fallback */ <audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> 브라우저가 audio를 지원하지 않습니다. </audio>

※ 닫는 태그가 필수. <audio /> 같은 self-closing 안 됨.

---

2 audio 속성

속성	역할
controls	표준 컨트롤 표시
autoplay	자동 재생 (대부분 차단됨)
loop	반복 재생
muted	소거 상태로 시작 (autoplay 우회용)
preload	auto/metadata/none — 미리 받을지
volume	JS 전용, 0~1

---

3 오디오 포맷 호환성

포맷	지원	특징
MP3 (.mp3)	모든 브라우저	가장 호환성 좋음, 라이센스 만료
OGG (.ogg)	Firefox, Chrome	오픈 포맷
AAC (.m4a)	Safari, Chrome	Apple 친화
WAV (.wav)	대부분	무압축 — 파일 크기 큼

---

 

반응형

 

4 background-size: cover

이 코드의 .top div가 사용한 배경 이미지 채우기 패턴.

cover

영역을 가득 채움 — 일부 잘릴 수 있음. 비율 유지.

contain

전체 이미지가 보이게 — 여백 생길 수 있음. 비율 유지.

---

5 자주 하는 실수

실수	증상	해결
controls 누락	오디오는 재생되지만 UI 없음	사용자 컨트롤 원하면 controls 필수
여러 포맷 source 안 함	일부 브라우저에서 안 됨	mp3 + ogg 두 개 권장
autoplay만 단독	크롬·모바일에서 차단	muted 같이 또는 사용자 클릭 후
self-closing 사용	HTML 검증 오류	</audio> 닫기

---

핵심 한 줄 요약

<audio>HTML5 표준 오디오 태그

controls브라우저 기본 재생/볼륨 UI

호환성MP3 + OGG 두 source면 거의 모든 브라우저

닫는 태그</audio> 필수, self-closing 안 됨

background-size: cover배경 영역 가득 채움 (잘릴 수 있음)

Tags

#HTML5 #audio #controls #source #MP3 #OGG #MIME-type #미디어태그 #오디오플레이어 #fallback #background-size #cover #웹표준 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

HTML5, audio, controls, source, MP3, OGG, MIME-type, 미디어태그, 오디오플레이어, fallback, background-size, cover, 웹표준, 웹개발, HTML, 티스토리