Hi-Fi LCD Player

WebDAV·내 기기 폴더·재생목록/웹 주소·Jellyfin 중 하나를 골라 음악을 브라우저에서 재생하는 웹 플레이어. 화면 전체를 도트 매트릭스 LCD로 그리고(시각화는 16단계 밝기), 재생 화면에는 총 50가지의 시각화가 있다. GIF는 옵션의 LOAD GIF나 창에 파일을 끌어 놓아 불러온다.

• 빌드 없음: 정적 파일(index.html, sw.js, css/, js/, font/) 그대로 배포
• 폴더 탐색, 대기열, 태그(MP3·FLAC·Ogg·Opus·M4A·WAV), 다음 곡 미리 불러오기, 10밴드 EQ, 라우드니스, 슬립 타이머, 미디어 키
• 영어·한국어, 밝은/어두운/시스템/사용자 지정 색 테마, 도트 간격 끄기, FPS 표시, 데스크톱·모바일

설계 문서는 docs/.

실행

node tools/dev-server.mjs          # http://localhost:5500/ (앱) + /dav/ (시험용 WebDAV)

처음 열면 SETUP의 SOURCE 묶음으로 간다. 음악 소스 네 가지 중 하나를 고른다:

소스	설정	비고
WebDAV	URL(비우면 앱과 같은 출처), USER, PASSWORD, ROOT	시험용: http://localhost:5500/dav/
내 기기 폴더	[CHOOSE FOLDER]	크롬·엣지는 고른 폴더를 기억(열 때 접근 허용 한 번), 파이어폭스·사파리는 새로고침하면 다시 고름. 서버·CORS 불필요
재생목록 / 주소	URL, (USER, PASSWORD)	M3U·M3U8·PLS 재생목록 또는 웹 폴더 목록 페이지(nginx·Apache 자동 목록 등). 시험용: http://localhost:5500/list.m3u, http://localhost:5500/index/
Jellyfin	URL, USER, PASSWORD	시험용 흉내: http://localhost:5500/jf/ (아무 아이디·비밀번호, 'wrong' 제외)

소스를 바꿔도 대기열은 그대로이고(곡마다 자기 소스로 재생), 소스마다 마지막 폴더를 따로 기억한다. 시험 음악은 node tools/make-fixtures.mjs(ffmpeg 필요)가 test/fixtures/music에 만든다. 대기열·시각화 설정 시험은 node --test test/.

물결 타이틀 시각화의 큰 글자는 font/noto-title*.woff2(Noto Sans CJK 부분집합)를 쓴다. 다시 만들려면 프로젝트 루트에 NotoSansCJK.ttc를 두고 python3 tools/build_title_font.py (fonttools·brotli 필요).

배포

index.html, sw.js, css/, js/, font/를 아무 정적 서버에 올리면 된다. sw.js는 앱 폴더의 맨 위에 있어야 한다.

상황	방법
WebDAV 서버와 같은 도메인	같은 출처로 묶음 (CORS 설정 불필요)
다른 서버	WebDAV·재생목록 서버·Jellyfin이 앱의 출처를 CORS로 허용해야 함 → docs/webdav-cors.md (내 기기 폴더는 해당 없음)

• 인증이 있는 서버의 재생·탐색에는 Service Worker가 필요하므로 HTTPS 또는 localhost에서 여는 것이 좋다. 아니면 파일 전체를 받아 재생하는 방식으로 자동 전환된다.
• HTTPS로 연 앱은 HTTP WebDAV에 접속할 수 없다.
• 서버 주소·아이디는 브라우저 localStorage에 저장된다. 비밀번호는 REMEMBER를 켰을 때만 localStorage에 암호화 없이 저장되고, 끄면 탭을 닫을 때까지만 기억한다.

단축키

키	동작
Space	재생/일시정지
1 2 3 4	PLAY / FILES / QUEUE / SETUP
Ctrl+←/→, Ctrl+↑/↓	이전·다음 곡, 볼륨
Tab / Shift+Tab, Enter, Esc	포커스 이동, 선택, 닫기
FILES: Backspace/←, →, M	상위 폴더, 폴더 열기, 동작 메뉴
QUEUE: Delete, Alt+↑/↓, M	삭제, 순서 변경, 동작 메뉴
PLAY 시각화: Enter(클릭), ←/→, ↑/↓, O(시각화 설정), A(자동 전환 켜기/끄기), F(전체화면), Esc(전체화면 종료)	시각화 고르기 창, 바로 전환, 대표 설정 순환(오실로스코프 X-Y, 3D 리사주 회전/고정, 만화경 대칭 수, 원형 스펙트럼 SPIKES/AMOEBA, NCS 원형/선형, 인광 스코프 파형/X-Y, 스피로그래프 곡선 종류 등), 시각화별 설정 창(SETUP의 VISUAL OPTIONS에서도 바꿀 수 있음)

라이선스

앱 코드는 이 저장소의 라이선스를 따른다. 화면 글꼴은 GNU Unifont의 비트맵(font/unifont.bin.gz)이며 SIL Open Font License 1.1 또는 GPLv2+ (폰트 예외 조항 포함) 로 배포된다. 글꼴 데이터를 바꿔 다시 배포할 때는 해당 라이선스 조건을 따라야 한다.