본 문서에서는 Stimulus와 ViewComponent를 활용한 웹 오디오 플레이어 구축 과정을 단계별로 안내합니다.
1. 개발 환경 및 UI 구성
-
Rails 프로젝트: Tailwind CSS와 ESBuild를 포함한 Rails 7 프로젝트를 생성하고, ViewComponent 및
class_variantsGem을 추가하여 컴포넌트 기반 UI 개발 환경을 구축합니다. -
AudioPlayerComponent:
AudioPlayerComponent를 정의하여 오디오 정보(URL, 제목, 저자)를 관리하고,class_variants를 통해 트랙 정보, 진행 바, 컨트롤 버튼 등 플레이어의 시각적 요소를 Tailwind CSS로 스타일링합니다.
2. HTML5 Audio API 이해
-
기본 원리:
<audio>태그 또는 JavaScriptAudio클래스를 사용하여 오디오를 임베드하고 제어하는 HTML5 Audio API의 기본 개념을 소개합니다. -
핵심 속성/이벤트:
src,controls등의 속성과loadedmetadata,timeupdate,play,pause,seeked,ended등 재생 상태 및 진행 상황을 관리하는 주요 이벤트를 설명합니다.
3. Stimulus를 통한 기능 구현
-
컨트롤러 정의:
audio_player_controller.js를 생성하고, 재생/일시정지 아이콘, 현재 시간, 진행 바, 볼륨 컨트롤 등 UI 요소를targets로, 오디오 URL을value로 선언합니다. -
재생 제어:
Audio인스턴스를 초기화하고loadedmetadata,timeupdate이벤트 리스너를 등록하여 시간 표시 및 진행 바를 동기화합니다.togglePlay메서드로 재생/일시정지를,seek메서드로 진행 바 클릭 시 재생 위치를 변경합니다. -
부가 기능: 키보드 이벤트(좌/우 화살표, ‘M’ 키, 스페이스 바)를 활용하여 탐색, 음소거, 재생/일시정지 기능을 추가하고, 입력 필드 포커스 시 충돌 방지 로직을 포함합니다. 볼륨 바를 구현하여 사용자가 볼륨을 조절할 수 있도록 합니다.
4. 파형 시각화 통합
- 시각적 요소: 진행 바를 대체하는 파형 시각화 기능을 도입하여 플레이어의 시각적 매력을 높이며, 이는 Canvas API를 활용한
WaveformVisualizer클래스를 통해 구현됩니다.