React × Tone.js Groove Workstation

React와 Tone.js로 만든 간단한 4트랙 · 16스텝 시퀀서입니다.
브라우저에서 바로 드럼/베이스/코드/리드 패턴을 만들고 재생해 볼 수 있습니다.

Tech Stack

• React (CRA 기반)
• Tone.js
• Vanilla CSS

주요 기능

시퀀서 구조

• 4개의 트랙
  • Drum
  • Bass
  • Chord
  • Lead
• 16-Step Grid
  • 각 셀 클릭으로 on/off (보라색으로 활성화)
  • 현재 재생 중인 스텝은 하이라이트 처리

트랙별 컨트롤

• Instrument Type Select

  • Drum: Acoustic / Electro
  • Bass: Sub / Pluck
  • Chord: Warm Pad / Keys
  • Lead: Soft / Sharp
  • 선택한 타입에 따라 음계/리듬/느낌이 달라지도록 Tone.js에서 분기 처리

• 패턴 유틸리티

  • Rnd : 해당 트랙의 패턴을 랜덤으로 채우기
  • Clr : 해당 트랙의 패턴 비우기
  • M : 트랙 mute 토글
  • Vol : 트랙별 볼륨 슬라이더 (dB)

글로벌 컨트롤

• 상단 우측 BPM 슬라이더 (기본 105)
• Play / Stop 버튼으로 Transport 제어
• Rnd All : 모든 트랙에 랜덤 패턴 생성
• Clear All : 모든 트랙 패턴 초기화

프로젝트 실행 방법

# 패키지 설치
npm install

# 개발 서버 실행
npm start