musik-maker

브라우저에서 여는 작곡(시퀀서) 앱. 악기를 고르고 → 격자(피아노 롤)에 음표를 찍고 → 재생하면 곡이 흘러나온다. 링크 하나로 폰·태블릿·다른 PC 어디서든 접속하는 것이 목표.

• 소리 엔진: Tone.js (Web Audio API 위에서 악기·타이밍·재생을 다룸)
• 화면: HTML + CSS + 바닐라 JS (프레임워크 없이 시작)
• 별도 빌드 도구 없음 — index.html을 브라우저로 열면 바로 돈다

실행

index.html을 브라우저로 열거나, 로컬 서버로 띄운다:

python3 -m http.server 8000

그 다음 http://localhost:8000 접속. (첫 재생 버튼 클릭 때 소리가 켜진다 — 브라우저 정책상 사용자 클릭이 있어야 오디오가 시작됨)

로드맵

• 1단계 — 악기 하나(피아노) + 격자 + 재생. 클릭한 음이 순서대로 소리남
• 2단계 — 여러 트랙, 템포·곡 길이 조절, 왼쪽 햄버거 메뉴 (트랙은 ＋ 트랙 추가로 만들고, 사운드(피아노·신스·베이스·드럼 등)는 트랙 드롭다운에서 고른다)
• 3단계 — 곡을 "세션"처럼 저장/전환 (왼쪽 드로어 = 내 곡 목록, localStorage). 지금은 수동 저장 — 💾 저장 버튼을 눌러야 저장
• 4단계 — 링크로 공유 → 다른 기기에서 같은 곡 열기 (서버 없이 URL에 곡을 담음)
• 5단계 — 신디사이저: 소리(프리셋)를 만들고·편집해 트랙에 끼우기. 파형·ADSR·컷오프·볼륨
• 6단계 — WAV로 내보내기: 곡을 오프라인 렌더링해 곡이름.wav 파일로 저장(서버 없음)
• 7단계 — 마스터 소프트 클리퍼(클리핑 방지) + 오선지 악보 보기(읽기 전용 + PNG 저장)
• 8단계 — 넓은 음역(C3~C6) + 세로 스크롤/드래그로 음역 이동(범위 밖 음도 입력)
• 9단계 — 상단 고정 재생바(재생·정지 항상 위) + 🔒 트랙 고정(모든 트랙 가로 이동 동기화)
• 10단계 — 기본 악기에 기타·관악기 추가 (플럭 재생 버그도 수정)
• 11단계 — 오디오 파일 불러오기: 업로드한 샘플을 음정에 맞춰 재생(Tone.Sampler)
• 12단계 — 트랙 접기/펼치기 + 순서 이동(▲▼) + 이름 변경(✎)
• 13단계 — 트랙별 볼륨(소리 크기) 슬라이더
• 14단계 — 드럼을 폴리포닉 원샷으로 재작성(겹쳐 쳐도 파열음 없음) + 킥 음량 키움
• 15단계 — 신디사이저 대폭 확장: 필터(공명·종류·엔벨로프)·이펙트(디스토션·비트크러셔·코러스)·모듈레이션(비브라토·트레모로)·유니즌 두께 + 악기 프리셋 8종(피아노·베이스·바이올린·첼로·플루트·금관·오르간·팀파니)
• 16단계 — 가로·세로 줌 + 넓히면 반박자(32분음표) 노트 넣기
• 17단계 — 박자 n×m(한 박=n칸 얕은 선, 한 마디=m박 굵은 선) + 편집 위치 초록 마커·열
• 18단계 — 편집 모드(잠금): ✏️ 편집을 켜야 수정 가능(실수 편집 방지)
• 19단계 — 노트 이동: 트랙별 ✥ 선택이동(범위 선택→드래그/화살표, 가장자리 자동 스크롤, 밖으로 밀면 잘림) + 기존 노트를 눌러 드래그하면 그 노트만 이동
• 20단계 — 재생/정지(=일시정지) 한 버튼(다시 재생하면 그 자리부터) + 수동 저장 + gzip 공유 링크(#songz=, 긴 곡도 짧게)
• 21단계 — JSON 내보내기/불러오기(AI용): 곡을 음이름 목록 JSON으로 주고받아 AI가 곡을 읽고 쓰기 쉽게(모르는 음·범위 밖은 몇 개 무시됐는지 안내, dry-run 검증)
• 22단계 — MIDI 내보내기/불러오기: 표준 .mid 파일로 다른 DAW(로직·큐베이스·개러지밴드 등)와 주고받기(라이브러리 없이 직접 읽고 씀)
• (나중에) 환경설정 · 기기 간 진짜 동기화(서버/계정)

템포·트랙 볼륨 조절

• 템포(BPM): 슬라이더 옆 숫자 입력에 직접 타이핑해서도 정한다(40~220, setBpm이 슬라이더·숫자·Transport를 함께 맞추고 범위 밖은 확정 시 클램프).
• 트랙 헤더의 🔊 슬라이더로 트랙 소리 크기(-30~+6dB)를 조절한다(접힘/펼침 모두 표시 — 믹싱). 옆에 현재 dB 숫자와 ↺ 초기화(0dB) 버튼이 있다.
• 각 트랙 신스는 트랙 전용 Tone.Volume 노드(createVoices의 vol)를 거쳐 마스터로 간다. setTrackVolume이 그 노드를 라이브로 조절(재생성 없음). 재생·WAV 렌더 모두 반영.
• track.volume은 세션 저장 + 공유 링크(코덱 v5) 에도 실린다(v1~v4 링크는 볼륨 0으로 열림).

트랙 접기·순서·이름

• 트랙 헤더 ▾/▸ 로 접고 편다. 접으면 격자를 숨기고 이름·음원(악기)·음소거만 남긴다(+ 접기·순서 버튼). 접힘 상태 track.collapsed는 세션에 저장된다(공유 링크엔 안 담김).
• 순서 이동: 헤더 ▲/▼ 로 트랙을 위/아래로. moveTrack이 tracks 배열 순서를 바꾼다(맨 위/아래는 비활성).
• 이름 변경: 헤더 ✎ → 인라인 입력(Enter 저장). 세션에 저장.

오디오 파일 불러오기 (샘플 소리)

• 신디사이저(소리 관리자) → 🎵 오디오 파일에서 → 오디오 업로드 → 그 소리를 Tone.Sampler 로 만들어 한 샘플을 건반 전체에 음정 맞춰 재생한다. 트랙 사운드 드롭다운에 🎵 로 뜨고, 다른 소리처럼 트랙에 끼운다.
• 샘플 소리 편집기: 기준 음(파일이 원래 내는 음), 볼륨, 미리듣기, 다른 파일로 교체.
• 오디오는 세션의 sounds에 data URL로 저장(localStorage). 디코드 버퍼는 sampleBuffers(id→ToneAudioBuffer)에 캐시하고, 로드되면 그 소리를 쓰는 트랙 신스를 다시 만든다(로딩 전에는 무음 폴백).
• 한계: 파일 1.5MB 이하(localStorage 용량). 공유 링크엔 오디오가 안 담긴다(너무 큼) — 공유하면 그 소리는 신스 소리로 대체된다(코덱이 샘플 소리를 기본 신스 파라미터로 인코딩). WAV 내보내기는 미리 디코드된 버퍼로 렌더된다.

기본 악기

• 트랙 사운드 드롭다운의 기본 악기: 피아노 · 신스 · 플럭 · 베이스 · 기타(통기타) · 클라리넷.
• Synth/FMSynth 기반(둘 다 Monophonic이라 PolySynth에 넣어 화음 가능). 기타·클라리넷은 FMSynth(배음이 풍부): 통기타=빠른 어택+긴 감쇠로 잦아드는 뜯는 줄, 클라리넷=홀수 배음의 목관·부드러운 어택·긴 지속. 나머지는 Synth+파형/엔벨로프.
• 주의(Tone 14.8): PluckSynth/NoiseSynth는 Monophonic이 아니라 PolySynth에 못 넣는다 (넣으면 재생 시 "Voice must extend Monophonic" 에러). 예전 '플럭'이 그 버그였고 Synth 기반으로 고쳤다.

상단 고정 재생바 + 트랙 고정

• 재생·정지·🔒 트랙 고정 버튼을 상단바에 넣고 position: sticky로 항상 위에 고정했다(스크롤해도 보임).
• 🔒 트랙 고정: 켜면 한 트랙을 가로로 스크롤할 때 모든 트랙이 같은 위치로 함께 움직인다 (syncTracksHorizontally, 각 트랙 _hscroll의 scroll 이벤트로 나머지를 맞춤, 피드백 루프는 syncingScroll로 방지). 상태는 localStorage에 기억한다.
• 가로/세로 스크롤은 트랙마다 한 컨테이너(.gridscroll) 가 맡고 touch-action: pan-x pan-y로 양축을 허용한다. (축을 나눠 중첩하면 안쪽 컨테이너의 touch-action이 격자를 한 축으로 제한해 다른 축이 막힌다.) 가로 스크롤이 실제로 생기려면 **flex 항목이 격자 크기만큼 커지지 않게 .track에 min-width:0**이 필요하다.

넓은 음역 + 세로 스크롤

• 멜로디 음역을 C6(위)~C3(아래) 37음으로 넓혔다. 격자는 그중 13줄만 보이는 세로 스크롤 뷰이고, 기본은 예전과 같은 C5C4 위치를 보여준다(음이름 열은 스크롤해도 왼쪽에 고정).
• 위아래로 이동: 마우스로 격자를 끌면 스크롤(이동 6px 넘으면 드래그로 보고 음 찍기 취소), 휠·스크롤바, 모바일은 세로 드래그로 스크롤. 스크롤 위치는 트랙별로 기억한다.
• 예전 저장(13줄, C5C4)과 옛 공유 링크는 음이름 기준으로 새 음역에 자동 매핑된다(코덱 v4, v1v3 하위호환).

마스터 소프트 클리퍼

• 여러 트랙이 겹쳐 음량이 천장을 넘으면 소리가 "찌그러진다"(클리핑). 이를 막으려 모든 트랙을 마스터 소프트 클리퍼(WaveShaper)로 모은다: 0.7 이하는 원음 그대로, 그 위는 tanh로 완만히 굽혀 입력이 아무리 커도 ~0.93에서 멈춘다(피크 3.3→0.93 확인). 재생·WAV·미리듣기 모두 동일 마스터. (Web Audio엔 진짜 리미터가 없어 컴프레서는 순간 피크를 놓친다 → WaveShaper로 확실히 눌렀다.)

오선지 악보 보기

• 왼쪽 메뉴 🎼 오선지 악보 보기 → 지금 곡을 5선 악보(SVG) 로 그려 보여준다(읽기 전용, 흰 바탕·검은 음표). 높은음자리표, 마디선, 음표 세로 위치 = 음높이, 가로 = 시간. #은 올림표로, 오선 밖 음은 보조선으로 표기.
• 멜로디 트랙만 그린다(드럼은 타악기 표기가 달라 제외, 안내만 표시). 📷 PNG로 저장으로 인쇄·공유용 이미지 다운로드.
• 스텝 하나 = 음표 하나로 단순화한 뷰다(음표 길이·쉼표·빔은 그리지 않는다).

WAV로 내보내기

• 왼쪽 메뉴 📤 WAV로 내보내기 → 곡을 Tone.Offline로 한 번에 렌더링 → 16비트 PCM WAV로 인코딩 → 곡이름.wav 다운로드. 서버 없이 브라우저에서 만든다.
• 길이 = 스텝수 × 16분음표 길이 + 여운 2초(현재 템포 기준). 재생용 신스는 건드리지 않고 오프라인 컨텍스트에 별도 신스(createVoices)를 만들어 렌더한다. 음이 하나도 없으면 안내만 뜬다.

MIDI 내보내기/불러오기

• 왼쪽 메뉴 🎵 MIDI 내보내기/불러오기 → 표준 .mid 파일로 다른 DAW(로직·큐베이스·개러지밴드 등)와 주고받는다. 외부 라이브러리 없이 브라우저에서 SMF를 직접 읽고 쓴다.
• 내보내기: 지금 곡 → 곡이름.mid. 1칸 = 16분음표, 드럼은 일반 MIDI 드럼(채널 10). 거의 그대로 옮겨진다.
• 불러오기: .mid 파일을 골라 새 곡으로 연다. MIDI는 자유 타이밍이라 격자(16·32분음표)에 맞춰 정렬하고, 음역(도3~도6) 밖 음은 옥타브를 옮겨 담는다 → "음 N개, M개 옮김/무시"를 알려준다.

신디사이저 (소리 만들기·편집)

• 왼쪽 메뉴 🎹 신디사이저 → 소리 관리자: ＋ 새 소리, 각 소리 [편집]·[이름변경]·[삭제].
• 편집기: 파형(사인/삼각/사각/톱니) + ADSR(어택·디케이·서스테인·릴리스) + 컷오프(밝기)
  • 볼륨. 슬라이더를 움직이면 그 소리를 쓰는 트랙에 즉시 반영(applySoundToTracks→poly.set).
• 트랙에 끼우기: 트랙 사운드 드롭다운에 내가 만든 소리가 이름으로 뜬다 → 고르면 그 트랙이 그 소리를 쓴다. 트랙 헤더의 🎹 음색 버튼으로 그 소리를 바로 편집. 소리를 삭제하면 그 소리를 쓰던 트랙은 피아노로 돌아간다.
• 소리는 곡(세션)의 sounds 배열에 담겨 저장(localStorage) 되고 공유 링크에도 실린다(코덱 v3). 링크에서 소리는 이름 + 7바이트로 양자화(파형 1 + ADSR 4 + 컷오프 1 + 볼륨 1), 트랙은 소리를 인덱스로 참조 — 값이 아주 미세하게 바뀔 수 있다(귀로는 구분 안 됨). v1/v2 링크도 계속 열린다(하위호환).

링크 공유 방식 (다른 기기)

마스터(여러 트랙이 겹쳐도 깨끗하게): ① 헤드룸(-6dB)으로 정상 믹스(2~4트랙)가 천장(0.9) 아래에 머물러 마스터가 손대지 않는다(왜곡 0). ② 넓은 범위 소프트 클립: 무거운 믹스가 넘쳐도 tanh로 부드럽게 포화. WaveShaper는 입력이 ±1을 넘으면 곡선 끝에 '평평하게 잘라'(=퍼벅) 버리므로, 입력을 1/DRIVE로 축소해 넣고 곡선이 ±DRIVE까지 다루게 한다 → 아무리 겹쳐도 하드클리핑 없이 매끄럽게 눌린다.

• 서버 없음. 곡(트랙·악기·격자·템포·마디)을 비트로 패킹→base64해서 URL 해시(#song=...)에 담는다. 격자가 불리언이라 그대로 두면 링크가 길어지므로 비트 패킹으로 짧게 유지한다(2트랙 2마디 ≈ 150자).
• 공유 버튼(상단 🔗 공유 또는 왼쪽 메뉴) → 링크 복사 → 나에게(카톡·메일 등) 보내 다른 기기에서 연다.
• 링크로 접속하면 그 곡을 새 세션으로 내 곡 목록에 담고 연다(주소창의 코드는 정리).
• 전제: 다른 기기에서 열려면 앱이 공개 주소에 있어야 한다. localhost 링크는 그 컴퓨터에서만 열린다. → 아래 "배포" 참고.
• 코덱은 encodeShare/decodeShare(app.js). 버전 바이트가 있어 나중에 포맷이 바뀌어도 구분 가능.

배포 (다른 기기에서 실제로 쓰려면)

정적 파일뿐이라 아무 정적 호스팅에나 올리면 된다. 가장 쉬운 건 GitHub Pages:

1. 이 폴더를 GitHub 저장소로 push
2. 저장소 Settings → Pages → Branch를 main/root로 지정
3. 몇 분 뒤 https://<아이디>.github.io/<저장소>/ 로 열림 → 이 주소에서 공유하면 폰에서도 열린다

(아직 push 안 함. 원하면 도와줄 수 있음.)

세션(내 곡) 저장 방식

• 곡 하나 = 세션 하나. 트랙·악기·격자·템포·마디를 통째로 브라우저 localStorage에 담는다 (키: musik-maker.sessions, 활성 곡: musik-maker.activeId).
• 자동 저장: 편집하면 400ms 뒤 활성 곡에 저장(연속 편집을 모아 한 번에). 저장 버튼 없음.
• 왼쪽 햄버거 → "내 곡" 목록에서 곡을 눌러 전환, ＋ 새 곡으로 추가, ✎로 이름 변경(인라인), 🗑로 삭제(실행취소 토스트 포함).
• 주의: localStorage는 이 브라우저에만 저장된다. 다른 기기/브라우저에서는 안 보인다 → 그건 4단계(클라우드+링크)에서 해결.

용어

• 피아노 롤: 가로=시간(칸), 세로=음 높이. 칸을 클릭해 음표를 켜고 끈다. 오선지보다 쉬워서 여기서 시작.
• 스텝(step): 격자의 한 칸. 재생하면 왼쪽부터 오른쪽으로 한 칸씩 지나간다.
• BPM(템포): 1분에 몇 박자인지. 클수록 빠르다.