[문제 인식]
제가 원한 건 복잡한 음악 관리 툴이 아니라, “CD가 도는 느낌” 하나만 제대로 주는
웹으로 작동하는 심플한 플레이어였습니다.
시중에 나온 프로그램들을 찾아보면 있긴 하지만, 막상 써보려고 하면 개인 취향의
영역인지 조금씩 불편하고 마음에 안 드는 구석이 있었습니다.
대부분은 딱 두 부류로 갈리더군요.
- 전문 소프트웨어: 기능은 많지만 정작 CD 회전 감성이 없거나 UI가 마음에 들지
않음.
- 간이 플레이어: 로컬 파일 재생은 되는데 UI에 “CD (커버 + 회전)”이 없음.
웹에서 “로컬 폴더에서 곡을 통째로 불러와 재생”하면서, “재생 시 디스크가
돌아가는 시각적 피드백”까지 결합된 도구를 찾는데 실패했습니다.
그래서 결론은 간단했습니다. 내가 원하는 핵심 기능만 묶어서 웹 페이지 하나로
직접만들기로 했습니다.
(폴더 로딩, 플레이리스트, 재생 컨트롤, 커버 아트, 그리고 CD 회전기능까지)
[핵심 기능]
1) 폴더 기반 로컬 음원 로딩(브라우저 내)
- 파일 입력으로 폴더(다중 파일)를 받아
오디오 확장자(mp3/wav/flac/m4a/aac/ogg/opus/wma) 필터링하고
- 선택된 파일 목록을 플레이리스트로 구성하고 첫 곡을 즉시 재생
2) 플레이리스트 UI(곡 선택/현재 곡 강조)
- 파일명에서 확장자 제거한 제목을 리스트에 출력
- 현재 재생 중인 곡은 active 표시
- 곡 변경 시 리스트가 해당 위치로 자동 스크롤(“지금 재생 중”이 항상 보이도록)
3) 기본 컨트롤
- 재생/일시정지 토글
- 다음 곡 재생(셔플 여부 반영)
- 반복 모드: 전체 반복(all) / 한 곡 반복(one)
- 곡 종료(onended) 시 모드에 따라 다음 동작 수행
4) 진행바/시간 표시(최소 UX)
- 재생 시간 업데이트(ontimeupdate)로 진행률 계산 → 진행바 채움
- 현재 시간/전체 시간 표시
- 진행바 클릭으로 이동
5) 볼륨 제어(증감 버튼)
- 볼륨 업/다운 버튼으로 5% 단위 조절, 웹페이지 시작시 기본 볼륨 70%
6) 커버 아트 처리(있으면 표시, 없으면 기본 이미지)
- 음원 파일에서 picture 추출 시 album art에 표시
- picture 없으면 기본 이미지(로컬 placeholder)로 대체
7) “CD 회전” 애니메이션(재생 상태 피드백)
- 재생 중일 때 목표치로 가속(accelTime)해 회전
- 곡 시작,끝 4초 전부터 감속(remaining 기반)
- 일시정지 시 즉시 정지가 아니라 holdSpin(ms)로 관성처럼 잠깐 더 돌게 처리
[사용방법]
※ 사용 팁) 브라우저에서 웹플레이어 탭을 하나 따로 떼서 크기를 변경해서 사용하세요
- 아래글 보면 복잡한것 같지만. 2개만 하시면 됩니다.
1. Web CD player.html 누른다.
2. 음원 폴더 선택한다





동영상 자료)
[문제 해결 포인트(한 줄 요약)]
- “웹에서 로컬 폴더 MP3를 바로 재생” + “실사용 가능한 최소 조작” +
“커버 아트/회전으로 현재 상태를 직관적으로 표시”를 한 페이지에서 해결.
[사용후기]
- 뭔가 CD가 돌아가는 느낌이란게 저한텐 재밌는 시각적 요소라서 포기할수가
없었는데 구현해보는 좋은 시도였던것 같습니다.
[다운로드 파일]
참고사항 :
1. 프로그램 파일은 개인 배포용입니다. 재배포는 삼가주시고,
본 포스팅을 통해 다운로드 부탁드립니다.
'갑자기 생각나서 만든 간단한 도구' 카테고리의 다른 글
| 복사한 이미지를 바로 파일로. 원클릭 PNG 저장 도구 제작(배포) (0) | 2026.01.08 |
|---|---|
| 특수문자 찾기 귀찮아서 직접 만든 '특수문자 이지픽' (원클릭 복사/배포) (1) | 2026.01.04 |
| 비디오 크롭 플레이어 Video Crop Player — (아이디어) (0) | 2025.12.27 |
| Clipboard Keeper — 초간단 복사 히스토리 프로그램 (직접 제작 / 다운로드 포함) (0) | 2025.11.29 |
| 뉴스 모니터링용 RSS Viewer — 직접 제작 (다운로드 포함) (0) | 2025.11.20 |