HTML5의 <audio> 태그는 충분히 스타일을 지정할 수 있습니다. 다만 어떤 방식을 선택하느냐에 따라 결과가 크게 달라지는데, 핵심은 브라우저가 제공하는 기본 컨트롤을 그대로 사용할 것인지, 아니면 자체 UI를 직접 구현할 것인지입니다.
1. controls 속성과 브라우저 기본 플레이어
<audio> 태그에 controls 속성을 추가하면 브라우저가 기본으로 제공하는 재생 바(재생·일시정지 버튼, 볼륨 조절, 진행 상태 표시줄 등)가 화면에 나타납니다. 이 방식은 구현이 매우 간단하지만, UI 디자인이 브라우저마다 제각각이고 CSS로 세부 요소를 자유롭게 꾸미는 데 한계가 있습니다.
2. controls 속성을 제거해 기본 UI 숨기기
반대로 controls 속성을 제거하면 브라우저 내장 UI가 화면에서 사라집니다. 이 경우 재생, 일시정지, 볼륨 조절 같은 기능을 JavaScript로 직접 구현해야 하지만, 그만큼 원하는 디자인의 커스텀 플레이어를 자유롭게 만들 수 있다는 장점이 있습니다.
다음은 controls 속성 없이 버튼으로 오디오를 제어하는 기본적인 예제입니다.
<audio id="player" src="kalimba.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">재생</button>
<button onclick="document.getElementById('player').pause()">일시정지</button>
<button onclick="document.getElementById('player').volume += 0.2">볼륨 +</button>
<button onclick="document.getElementById('player').volume -= 0.2">볼륨 -</button>
</div>
3. CSS 클래스로 자유롭게 스타일링하기
위 예제처럼 각 버튼과 컨테이너 요소에 CSS 클래스를 부여하면, 일반적인 웹 요소와 동일한 방식으로 색상, 크기, 여백, 모서리 둥글기, 호버 효과 등을 마음껏 적용할 수 있습니다. 여기에 아이콘 폰트나 SVG 이미지를 함께 활용하면 훨씬 더 세련된 플레이어 UI를 완성할 수 있습니다.
정리
- controls 속성 사용 시: 코드 한 줄로 플레이어가 완성되어 편리하지만, 브라우저별 기본 디자인에 종속됩니다.
- controls 속성 미사용 시: JavaScript로 기능을 직접 구현해야 하는 번거로움이 있지만, 디자인 전체를 완전히 커스터마이징할 수 있습니다.