프로젝트 소개

Waveform Playlist는 React, Tone.js 및 Web Audio API를 기반으로 구축된 브라우저용 멀티트랙 오디오 편집기이자 플레이어입니다. 캔버스에 파형을 렌더링하고 드래그 앤 드롭 클립 편집을 지원하여 Audacity와 같은 데스크톱 편집기의 웹 기반 대안입니다. README에 설명된 핵심 기능: - 멀티트랙 편집: 트랙당 여러 클립, 드래그로 이동 및 트림 핸들. - 파형 시각화: 줌 컨트롤이 있는 캔버스 렌더링, 더 빠른 로딩을 위한 선택적 사전 계산 피크. - 효과: 실시간 파라미터 제어 및 마스터 효과 체인이 있는 Tone.js 효과 라이브러리(리버브, 딜레이, 필터, 디스토션 등). - 녹음: 라이브 파형 미리보기, VU 미터링, 오버더빙 및 Web Components 변형의 펀치인 교체 기능이 있는 AudioWorklet 기반 캡처. - 내보내기: 진행 상황 보고와 함께 개별 트랙 또는 전체 믹스의 WAV 내보내기. - 주석: 키보드 탐색 및 드래그 편집이 가능한 시간 동기화 텍스트 주석. - MIDI: MIDI 파일 파싱, 피아노 롤 시각화 및 SoundFont 또는 PolySynth 재생. - 테마: 다크 및 라이트 모드의 사용자 정의 가능한 테마. - TypeScript: 타입 정의 포함. 사용법은 컴포넌트 기반입니다. 일반적인 설정은 UI를 WaveformPlaylistProvider로 감싸고, createTrack 및 createClipFromSeconds로 생성된 트랙을 제공하며, PlayButton, PauseButton, StopButton 및 Waveform을 구성합니다. 훅은 오디오 로딩(useAudioTracks), 트랜스포트 제어(usePlaylistControls), 재생 애니메이션, 줌, 동적 효과 및 WAV 내보내기를 다룹니다. Tone.js와 @dnd-kit/react는 별도로 설치되는 피어 의존성입니다. 프로젝트는 여러 패키지로 구성됩니다: 브라우저 컴포넌트 및 훅, 핵심 타입 및 유틸리티, 프레임워크에 구애받지 않는 타임라인 엔진, 스타일이 적용된 UI 컴포넌트, Tone.js 재생 엔진, 피크 추출. 선택적 패키지는 MIDI, 주석, 녹음, 공유 AudioWorklet 프로세서, 스펙트로그램 렌더링 및 피치 보존 재생 속도를 가진 HTMLMediaElement 기반 재생을 추가합니다. 실험적인 Web Components 레이어(Lit 기반, React 불필요)는 선언적 daw-track 및 daw-clip 요소, 명령형 편집기 API, 네이티브 Web Audio와 Tone.js 간의 어댑터 선택, 충돌 감지가 있는 클립 이동/트림/분할, 실행 취소/다시 실행, 키보드 단축키, 파일 드롭, 혼합 박자 및 템포 변경이 있는 메트로놈, 템포 자동화, 선택적 브라우저 내 Faust DSP 컴파일을 통한 WAM 2.0 플러그인 호스팅을 제공합니다. 사양 문서는 요소 카탈로그와 마이그레이션 단계를 설명합니다. 문서에는 라이브 대화형 예제, 시작 가이드 및 API 참조가 포함되어 있습니다. 브라우저 지원에는 최신 Web Audio API 구현(Chrome, Firefox, Safari, Edge)이 필요합니다. 프로젝트는 MIT 라이선스이며 Sourcefabric의 Airtime 프로젝트에서 시작되었습니다.