noteDigger – 프론트엔드 오디오에서 MIDI로의 변환 도구

무엇을 할 수 있나요

• 오디오(또는 비디오) 파일을 업로드하고 스펙트로그램을 시각화하며, 수동 또는 자동으로 음표를 추출할 수 있는 순수 JavaScript 웹 앱입니다.
• 추출된 음표는 풍부한 마우스/키보드 단축키로 편집 가능하며, 표준 MIDI 파일 또는 나중에 계속 작업할 수 있는 커스텀 이진 파일인 ".nd" 프로젝트 파일로 내보낼 수 있습니다.

왜 중요한가요

• 대부분의 오디오에서 MIDI로의 변환 도구는 무거운 데스크톱 프로그램이나 클라우드 서비스입니다. noteDigger는 완전히 브라우저 내에서 작동하며, 외부 라이브러리나 프레임워크가 필요 없어 작고 가볍습니다(몇 MB). 그러나 GPU 가속 STFT/CQT, 신경망 기반 변환, 하모닉 제거와 같은 고급 기능을 제공합니다.
• 전체 워크플로우를 클라이언트 측에서 유지함으로써 사용자 개인정보를 보호(오디오가 기계를 떠나지 않음)하고, 초기 페이지 로드 후 오프라인에서도 작동합니다.

주요 기능 (README에 설명됨)

기능	작동 방식 / 제공되는 기능
오디오 가져오기	드래그 앤 드롭 또는 파일 메뉴를 통한 MP3, WAV, 또는 비디오 파일(MP4, MOV 등) 업로드.
스펙트로그램 분석	실시간 STFT; WebGPU를 통해 GPU 가속이 가능한 선택적 CQT(일정-Q 변환).
자동 처리	• NNLS(비음수 최소제곱법)를 사용한 하모닉 제거로 기본 주파수 강조. • 비트 추적 및 템포 감지(전통적인 신호 처리 알고리즘). • 두 개의 ONNX 모델(basicamt: 기기 무관 피치 변환, septimbre: 기기 분리 변환)을 사용한 AI 지원 변환.
수동 편집	시간-주파수 캔버스 위에 직접 음표를 그릴 수 있으며, 이동, 늘리기/줄이기, 복사/붙여넣기, 삭제, 트랙 잠금이 가능합니다. 일반적인 단축키(Ctrl-Z/Y, Ctrl-C/X/V 등)를 모두 지원합니다.
정량화 및 정렬	두 가지 내보내기 모드: (1) 원시 음표 위치(초 단위)를 유지하는 "들으면서 그리기" 워크플로우용; (2) 사용자가 설정한 정밀도 x에 따라 음악적 하위 단위로 정량화하며, 바 수준의 BPM 변경도 선택 가능.
MIDI 가져오기/내보내기	사용자 정의 템포와 정량화를 설정 가능한 표준 MIDI(타입-1, 멀티트랙)로 내보내기. 기존 MIDI 파일 가져오기; 음표는 트랙에 매핑되며 속도는 기본값 127로 설정됩니다.
프로젝트 저장	이진 파일 ".nd"는 스펙트로그램, 음표, 트랙, 바 정보를 저장하여 나중에 다시 열 수 있습니다.
UI	드래그 가능한 트랙, 오른쪽 클릭 컨텍스트 메뉴, 피아노롤 뷰, 도구 전환(예: 비트 스냅, 바 스냅)을 위한 상단 툴바를 갖춘 현대적이고 프레임워크 없는 UI.
성능 최적화	재렌더링 빈도 감소, 사용자 동작 시 통합 리프레시, 편집된 음표의 실시간 재생을 위한 "tinySynth" 자바스크립트 싱스.

일반적인 워크플로우 (README 요약)

1. 최신 브라우저(Chrome 권장)에서 앱을 엽니다.
2. 오디오 파일을 업로드하고 분석 방법(STFT 또는 CQT)을 선택하며, 가능하면 GPU를 활성화합니다.
3. 선택적 자동 단계 실행: 비트 감지 → 하모닉 제거 → 키 감지.
4. "AI 변환" 버튼("인공지능 빼기")을 눌러 초기 음표 맵을 생성합니다.
5. 수동으로 결과를 개선: 비트에 스냅, 바 합치기, 트랙 잠금 등.
6. 최종 결과를 MIDI 파일(MIDI로 정량화, 악보용)로 내보내거나, 나중에 편집할 수 있도록 프로젝트를 저장합니다.

기술적 특징

• WebGPU 가속 CQT – 통합 그래픽에서도 정수 Q 변환을 빠르게 수행.
• 브라우저 내 ONNX 런타임 – 서버 없이 두 개의 사전 학습된 신경망을 실행하여 피치 변환과 기기 분리를 수행.
• 비음수 최소제곱법 (NNLS) – 하모닉 성분을 제거하고 기본 주파수를 강조하는 고전적 최적화 기법.
• 순수 JS 아키텍처 – React/Vue 등은 사용하지 않으며, 모든 UI 컴포넌트는 수작업으로 JS 클래스로 구현되어 번들 크기를 최소화합니다.

누가 사용할 수 있나요

• 녹음에서 음표를 빠르고 개인정보를 보호하며 추출하고 싶은 음악가.
• 브라우저에서 오디오 신호 처리를 실험하는 교육자나 학생.
• 클라이언트 사이드 스펙트로그램 시각화, WebGPU 기반 CQT, 또는 자바스크립트에서 ONNX 추론의 참조 구현을 찾는 개발자.

체험해보기

• 라이브 데모: https://maddersscientist.github.io/noteDigger/
• 동영상 튜토리얼 (중국어): https://www.bilibili.com/video/BV1LFRmBcEEU

---

위 정보는 리포지토리의 README에서 직접 인용되었으며, 추가 기능은 추측되지 않았습니다.