Web Audio API & wavesurfer.js 기반의 개인 악기 연습 플랫폼입니다.
25.11. ~ 25.12.
개인 프로젝트
- 오디오 로드 & 재생 (wavesurfer.js)
- 각종 재생 제어 기능(볼륨, 오디오 파형 확대, 루프, 배속, bpm 예측)
- 메트로놈 + 탭 템포 기능 (Tone.js)
- 오디오 인풋 연결 & 장치 선택 (Web Audio API)
- 입력받은 신호 기반 튜너 (AudioWorkletProcessor)
- 연습 기록 기능
- 연습 로그기반 각종 데이터 시각화 그래프를 통한 연습 통계 확인 (Recharts)
- 반응형 UI를 통한 모바일 뷰포트 지원
- 웹페이지 언어 설정
- React
- TypeScript
- Tailwind css
- Emotion css
- shadcn
- motion
- Zustand
- Web Audio API
- wavesurfer.js
- Tone.js
- Recharts
- Vite
- eslint + prettier
- Render
- npm
이동: Simply-Practice
본 프로젝트는 백엔드 API 연동 전 단계의 프론트엔드 프로토타입으로, Mock Data를 통해 주요 기능 및 UI 흐름을 구현하였습니다.