브라우저에서 폴더 열어 재생하는 Web CD Player 만들어보기 (배포)

[문제 인식]

 

제가 원한 건 복잡한 음악 관리 툴이 아니라, “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. 음원 폴더 선택한다

1. Web CD Player.html 실행

2. 음원이 있는 폴더를 선택해줍니다

3. 폴더에 있는 음원이 들어오며, 플레이리스트에 들어오고, 선택및, 임의재생 1곡반복,전체반복 볼륨등 설정하시면됩니다.

번외1) 브라우저 크기를 좀 줄이거나 하면 플레이어 크기도 변합니다.

 

번외2) 브라우저 크기를 좀 줄이거나 하면 플레이어 크기도 변합니다.

 

동영상 자료)

Web CD Player 실행 영상이며, 무음으로 녹화하였습니다.

 

[문제 해결 포인트(한 줄 요약)]

 

- “웹에서 로컬 폴더 MP3를 바로 재생” + “실사용 가능한 최소 조작” + 

  “커버 아트/회전으로 현재 상태를 직관적으로 표시”를 한 페이지에서 해결.

 

[사용후기]

 

- 뭔가 CD가 돌아가는 느낌이란게 저한텐 재밌는 시각적 요소라서 포기할수가

없었는데 구현해보는 좋은 시도였던것 같습니다.

 

 

[다운로드 파일]

Web CD Player.zip

0.97MB

 

참고사항 : 

1. 프로그램 파일은 개인 배포용입니다. 재배포는 삼가주시고, 

    본 포스팅을 통해 다운로드 부탁드립니다.