CrownyDAW 웹 UI — daw.crowny.org:9881
개요
Logic Pro / Ableton Live 스타일의 웹 기반 DAW UI를 구현했습니다. 외부 CDN 없음, 순수 Node.js + Vanilla JS + Canvas 2D + Web Audio API.무엇을 했는지
1. /Users/ef/crowny-audio/daw/web/server.js (262줄)
- 포트 9881, 순수 Node.js http 모듈
- GET/POST
/api/project— BPM, 박자, 샘플레이트 관리 - GET/POST/PUT/DELETE
/api/tracks— 트랙 CRUD - POST
/api/render— CAF7 렌더링 큐 전달 - GET
/api/status— 서버 상태 - 인메모리 데모 트랙 7개 자동 생성 (보컬/기타/베이스/드럼/피아노/신스/리버브버스)
2. /Users/ef/crowny-audio/daw/web/public/index.html (1938줄, 64KB)
완전한 DAW UI — Logic Pro 스타일 다크 테마:구현된 기능:
- 트랜스포트 바: 재생/정지/녹음, MM:SS.FF 시간 표시, BPM 입력, 박자 (4/4→3/4→6/8→5/4→7/8 순환)
- 트랙 패널 (200px): 이름/타입, 볼륨 슬라이더 (드래그), M/S/R 버튼, 27색 컬러 바
- 타임라인: 마디/비트 눈금자, 클립 블록 (파형 스케치/MIDI 미니뷰), 재생 커서 (빨간 세로선 애니메이션)
- 믹서 뷰: 수직 채널 스트립 (페이더 드래그, VU 미터 애니메이션, 팬 노브, M/S)
- 피아노롤: 88건반 키보드 렌더링, 클릭=노트 추가, 우클릭=삭제, 벨로시티 바
- 파형 뷰: Canvas 기반 파형 렌더링, 줌 인/아웃
- Web Audio API: 메트로놈 클릭 음, MIDI 노트 미리듣기 (OscillatorNode)
- 키보드 단축키: Space=재생/정지, R=녹음, Tab=믹서, +/-=줌, Delete=트랙 삭제
- 클립 드래그 이동 지원
- 프로젝트 설정 모달, 트랙 추가 모달
- 배경: #0F0F1A, 27색 팔레트 (3진 기반)
- CSS Grid/Flexbox, 반응형 (최소 1024px)
- 메뉴바 + 트랜스포트 + 어레인저 + 하단 패널 (믹서/피아노롤/파형)
3. /Users/ef/crowny-audio/daw/web/DAW웹.한선 (351줄)
한선씨 동반 파일 — TCP 서버 + 라우팅 + 트랙 관리 로직 완전 구현관련 파일 경로
- 웹 서버:
/Users/ef/crowny-audio/daw/web/server.js - DAW UI:
/Users/ef/crowny-audio/daw/web/public/index.html - 한선씨:
/Users/ef/crowny-audio/daw/web/DAW웹.한선 - 오디오 서버:
/Users/ef/crowny-audio/server/server.js(포트 9880) - DAW 엔진:
/Users/ef/crowny-audio/daw/core/DAW엔진.한선
서버 실행
bashcd /Users/ef/crowny-audio/daw/web
node server.js
# → http://localhost:9881
잔여 이슈
- 실제 CAF7 파일 재생 (Web Audio API AudioBuffer 연동) 미구현
- 피아노롤 노트 드래그 이동/리사이즈 미구현
- 트랙 복제, 이름 인라인 편집 미구현
- 클립 리사이즈 핸들 기능 미구현 (시각적으로만 표시됨)
- 오토메이션 레인 뷰 미구현
- MIDI 파일 가져오기/내보내기 미구현