설치 없이 audiomass.co에 접속하면 그 자리에서 MP3·WAV·FLAC을 잘라 붙이고, 노이즈를 빼고, 컴프레서·EQ·리버브를 걸어 다시 내보낸다. 서버는 한 줄도 거치지 않는다 — 모든 DSP가 브라우저 안에서 끝난다. 2.3k 스타를 가진 8년 된 바닐라 JS 단일 페이지 앱. 프레임워크 없음, 빌드 시스템 없음, npm install 없음. 그저 <script> 태그 24개와 WASM 모듈 3개의 합주.
Adobe Audition 같은 유료 도구는 라이선스가 비싸고, Audacity는 데스크탑 설치가 필요하다. AudioMass는 그 사이 빈틈을 메운다 — 로그인도 없고, 결제도 없고, 파일을 어디 서버로 보내지도 않는다. 드래그&드롭한 음원은 처음부터 끝까지 당신 브라우저 메모리 안에서만 산다. 작업이 끝나면 다시 다운로드할 뿐이다.
8년이 흘러도 살아남은 이유는 두 가지다. ① Web Audio API + WASM가 충분히 성숙해서 데스크탑 앱과 체감 차이가 거의 없다. ② Adobe·Audacity 같은 강자들이 가지 못한 "제로 인스톨 + 프라이버시" 자리를 혼자 차지하고 있다.
웨이브폼·DSP·WASM — 처음 보는 말부터 정리하고 시작
이 레포는 웹브라우저 한 페이지 안에서 동작하는 본격 오디오 편집기다. 한 페이지짜리 토이가 아니라, Audacity가 데스크탑에서 해 주는 일(자르기·붙이기·노이즈 제거·이펙트·다중 트랙 믹싱·MP3 인코딩)을 거의 다 해낸다.
wavesurfer.js라는 라이브러리로 이 그림을 캔버스에 그린다.AudioContext를 만들어 노드 그래프(소스 → 필터 → 게인 → 출력)를 그리면 그대로 실시간 DSP를 돌려 준다. 데스크탑 오디오 앱이 쓰는 ASIO·Core Audio의 웹 버전이라고 보면 된다. AudioMass의 핵심 엔진이 바로 이 위에 얹혀 있다.전기 기타로 비유하면 — 음악실에 가서 기타를 빌리고 앰프를 켜고 이펙트 페달을 깔고 녹음 장비를 세팅하는 게 데스크탑 오디오 편집기(Audacity)다. 반면 AudioMass는 "문 열고 들어가면 이미 모든 게 켜져 있고, 마이크 잭만 꽂으면 바로 녹음되는 부스" 같은 것. 설치도 없고, 다음에 와도 환경이 그대로 떠 있다.
다만 부스 안의 장비는 부스에 묶여 있다(브라우저 탭 닫으면 휘발). AudioMass는 .amss(자체 세션 포맷)로 작업을 LZ4로 압축해 IndexedDB에 저장하거나 파일로 내보내어 이 한계를 보완한다.
단어 한 개를 뺐을 때 의미가 깨지는 가장 짧은 설명
AudioMass는 "바닐라 자바스크립트와 Web Audio API·WASM만으로 만든, 서버 없이 브라우저에서 완결되는 본격 파형 편집기"다.
한 단어라도 빼면 의미가 깨진다.
package.json조차 없다. 24개의 .js 파일을 <script>로 줄세워 로드한다.① audiomass.co에 접속해 마이크 권한을 허용하고 녹음 → ② 자동으로 rnn_denoise.wasm(RNNoise 신경망 노이즈 제거기)이 로드돼 잡음 제거 메뉴 활성화 → ③ "Effects → Noise Reduction" 클릭. 235 KB WASM 모델이 마이크 노이즈·키보드 클릭·에어컨 소음을 학습된 가중치로 분리한다.
④ 컴프레서로 다이내믹 다듬고 → ⑤ EQ로 저음 컷, 중음 살짝 부스트 → ⑥ Normalize로 음량 통일 → ⑦ "File → Export As MP3" 클릭하면 lame.js(534 KB의 LAME 인코더 JS 포팅)가 MP3로 인코딩 → 다운로드. 전 과정이 당신의 브라우저 안에서 끝난다.
2.3k 스타 레포가 2026년 5월 19위에 다시 오른 이유
AudioMass는 2018년부터 존재한 레포다. 그런데 2026년 5월 다시 TrendShift 19위에 올랐다. 새 기능 폭탄이 떨어진 것도, 거대한 마케팅이 있던 것도 아니다. 이유는 "시간이 흘러서 강점이 강점이 됐다"는 데 있다.
ChatGPT·Suno·ElevenLabs 시대에 음원 업로드 = 학습 데이터화의 의심이 깔린다. AudioMass는 "파일이 서버에 안 올라간다"가 핵심 가치. 회의 녹음·인터뷰·미공개 음원을 다루는 저널리스트·연구자·아티스트가 다시 찾는 이유다.
React·Next 14·Svelte 5 같은 마법 같은 프레임워크에 익숙해진 사람들이 "Web Audio API와 Canvas만으로 진짜 앱이 만들어진다"는 사실을 새삼 학습 가치로 인식하기 시작했다. app.js를 열면 고전적인 모듈 패턴 + 이벤트 버스(fireEvent/listenFor) 한 가지로 전체 앱이 엮여 있다 — 프레임워크 없이도 거대한 SPA가 만들어진다는 살아 있는 증거.
2018년 출시 당시엔 RNNoise WASM이 실험적이었고, AudioWorklet도 ScriptProcessorNode 시절이었다. 8년이 지나 둘 다 안정화됐고, AudioMass는 그 모두를 실전에서 합쳐 쓰는 가장 좋은 오픈 예제가 됐다 — 학습 자료 측면에서 다시 부상.
| 경쟁 제품 | 설치 | 가격 | 다중 트랙 | 특이점 |
|---|---|---|---|---|
| Audacity (데스크탑) | 필요 | 무료 | O | 윈도/맥/리눅스 풀 네이티브 |
| Adobe Audition | 필요 | 월 23.99$ | O | 업계 표준, 무거움 |
| BandLab | 웹 | 무료 | O | 업로드 필요, 클라우드 저장 |
| SodaPhonic | 웹 | 일부 유료 | X | 심플하지만 기능 부족 |
| AudioMass | 없음 | 무료 | O | 완전 로컬, 오픈소스, 8년 검증 |
왜 이게 "풀스택"이 아니라 사실상 "프론트엔드 올인"인지
| 레이어 | 기술 | 역할 |
|---|---|---|
| 언어 | 바닐라 JavaScript (ES5) | 전체 코드 94.3%, 트랜스파일·번들 없음 |
| 스타일 | plain CSS | main.css 61 KB 한 파일 |
| 오디오 코어 | Web Audio API | AudioContext·BufferSource·AnalyserNode·BiquadFilter |
| 파형 렌더링 | wavesurfer.js (커스텀 fork) | Canvas 기반 파형 그리기·줌·스크롤·리전 선택 |
| 실시간 녹음 | AudioWorklet | recorder-worklet.js — 오디오 스레드에서 PCM 캡처 |
| 백그라운드 분석 | Web Worker | tempo-worker.js — BPM 추정을 메인 스레드 밖에서 |
| 오프라인 동작 | Service Worker + PWA | sw.js + manifest.json — 인터넷 없어도 동작 |
| WASM 파일 | 크기 | 원본 라이브러리 | 역할 |
|---|---|---|---|
libflac.wasm | 138 KB | libFLAC (Xiph.Org) | FLAC 인코딩/디코딩 (무손실 압축) |
rnn_denoise.wasm | 235 KB | RNNoise (Mozilla) | 신경망 기반 노이즈 제거 |
lz4-block-codec.wasm | 1.2 KB | LZ4 | .amss 세션 압축 |
| 파일 | 크기 | 역할 |
|---|---|---|
lame.js | 534 KB | LAME MP3 인코더 JS 포팅 — MP3 export 담당 |
flac.js | 3.6 KB | libflac.wasm 래퍼 |
wav.js | 3.2 KB | WAV 인코더 (RIFF 헤더 + PCM) |
id3.js | 22 KB | MP3 ID3 태그 읽기/쓰기 (아티스트·앨범·아트워크) |
lzma.js | 5.9 KB | LZ4 블록 코덱 JS 래퍼 (lz4-block-codec-any.js) — IndexedDB 세션 압축 |
유일한 "서버" 코드는 단 두 파일이며, 둘 다 로컬 개발 편의용이다.
실제 운영(audiomass.co)도 정적 파일 호스팅 그 자체다. 서버 사이드 로직이 0줄. 백엔드 API 호출도 0회. 그래서 "프라이버시 우선"이 마케팅 멘트가 아니라 아키텍처의 자연스러운 결과다.
바닐라 JS가 어떻게 거대 SPA를 끌고 가는가
app.js 한 줄에 핵심 설계가 담겨 있다.
모듈끼리 서로 직접 호출하지 않는다. 모두 fireEvent('StateRequestPush', state)처럼 이벤트 이름을 던지고, listenFor로 누가 듣는다. EventEmitter 패턴 — Node.js의 EventEmitter, React의 Context, RxJS의 Subject가 다 같은 뿌리다.
모듈 24개가 서로 직접 import 한다면 모듈 그래프가 거미줄이 된다. 이벤트 버스를 끼우면 모든 모듈이 "버스 정거장"에 메시지를 던지고 누가 받든 신경 안 쓴다. engine.js가 파형을 바꿨으면 StateRequestPush 던져 두면 state.js가 알아서 undo 스택에 쌓는다. 새 모듈을 추가할 때 기존 코드 한 줄 안 건드린다.
오디오 편집기에서 가장 까다로운 부분이 "잘라낸 1분짜리 오디오를 어떻게 되돌릴까"다. 텍스트 에디터처럼 줄 단위가 아니라, 수십 메가의 PCM 데이터를 통째로 다뤄야 한다. AudioMass의 해법은 "버퍼 자체를 stack에 push"다.
depth 96 — undo를 96번까지 되돌릴 수 있다. 96 × 큰 오디오 버퍼 = 메모리 폭발이 날 수 있지만 JS 엔진의 가비지 컬렉터를 신뢰하고, 96개를 넘으면 가장 오래된 것부터 shift로 버린다.
전역 싱글톤이지만 각 모듈이 자기 자신을 직접 w.PKAudioEditor.ui에 끼우지 않는다. 대신 q._deps.ui = PKUI로 "내 클래스 여기 등록해"라고 적어 두고, init() 시점에 한 번에 q.ui = new q._deps.ui(q)로 인스턴스화한다.
덕분에 모듈 로딩 순서가 바뀌어도 깨지지 않는다. engine.js가 ui.js보다 먼저 로드되든 나중이든, 둘 다 _deps에 등록만 해 두면 init()이 알아서 인스턴스를 만든다.
각 파일의 역할 — 크기로 보는 책임 분배
핵심 관찰 — 큰 파일은 거의 다 UI나 이펙트다. Web Audio API 자체가 DSP를 다 해 주기 때문에 "오디오 엔진"보다 "오디오 엔진을 조작하는 UI"가 압도적으로 크다. 데스크탑 앱과 정반대 구조다.
이 레포에서 무엇을 배워 가는가
engine.js 111 KB를 읽으면 다음을 배운다 — AudioContext 라이프사이클, AudioBuffer를 PCM Float32Array로 직접 다루기, BiquadFilterNode 체인으로 EQ 만들기, DynamicsCompressorNode로 컴프레서/리미터 구현, ConvolverNode로 리버브, ChannelSplitter/ChannelMerger로 채널 분리.
AudioMass의 fx-pg-eq.js에서 BiquadFilter 5개를 직렬 연결하는 패턴만 베껴서 미니 EQ를 만들어 보면 Web Audio API 그래프 사고가 잡힌다.
rnn_denoise.js(84 KB)는 RNNoise C 라이브러리를 Emscripten으로 WASM 변환한 결과다. JS ↔ WASM 메모리 공유(HEAPF32에 PCM 쓰고, WASM 함수가 같은 메모리 읽기), WASM 함수 호출 비용 최소화(작은 호출 여러 번 대신 큰 버퍼 한 번에) 같은 실전 패턴이 들어 있다.
app.js + state.js 조합을 분석하면 이벤트 버스 + 의존성 주입 + 명령형 undo 스택이라는 세 패턴만으로도 25개 모듈이 협업할 수 있다는 사실을 본다. React/Redux에 익숙해진 사람에게 좋은 역방향 학습.
recorder-worklet.js는 30줄짜리지만 의미가 크다. 옛 ScriptProcessorNode는 메인 스레드에서 돌아 UI를 끊었다. AudioWorklet은 별도 오디오 렌더링 스레드에서 돌아 글리치가 없다. 마이크 녹음 앱을 만들 때 가장 정확한 현대적 방법.
manifest.json + sw.js로 "한 번 열어 두면 인터넷 없어도 동작한다". 모든 정적 자원을 Service Worker가 캐싱한다. 실용 PWA 구조의 최소 예시.
lufs.js(5 KB)는 ITU-R BS.1770-4 표준을 구현한다. Spotify·YouTube·넷플릭스가 음량을 맞추는 그 알고리즘이다. K-weighting 필터, gating, integrated/short-term/momentary 세 가지 측정값 계산을 단 5 KB에 담아 둔 좋은 참고 코드.
브라우저 한 탭이 다지만, 결코 가볍지는 않다
go run audiomass-server.go 한 줄로 끝.30분짜리 팟캐스트(300 MB)에 Undo 10번 + 컴프레서 + EQ 걸면 브라우저 메모리가 3~4 GB로 치솟는다. 모바일 브라우저는 OS가 탭을 죽일 수 있다. 긴 작업은 데스크탑에서, 중간중간 .amss로 저장하는 습관 필요.
난이도별 5개 — 코드 안 읽고도 시작 가능
Zoom·구글미트로 녹음한 1시간짜리 MP3를 AudioMass에 드롭 → 시작 인사·끝 잡담 자르기 → Noise Reduction으로 에어컨 잡음 제거 → Normalize로 음량 통일 → MP3 export.
학습 포인트: 리전 선택, 잘라내기, 이펙트 체인의 일반 흐름.
다중 트랙(Multitrack) 모드 켜고 → 배경 음악 트랙 + 보이스 트랙 두 개 올리기 → 보이스 시작 4초 전부터 배경 음악 페이드아웃 자동화 → LUFS 측정해서 -16 LUFS(Spotify 권장)에 맞춤 → WAV export.
학습 포인트: 다중 트랙 믹싱, 오토메이션, LUFS 표준.
engine.js에서 BiquadFilterNode를 어떻게 체인으로 잇는지 분석 → 50~100줄짜리 HTML 한 페이지로 3밴드 EQ(저음·중음·고음) 만들기 → 슬라이더 움직이면 실시간 적용.
학습 포인트: Web Audio API 노드 그래프, 필터 유형(lowshelf/peaking/highshelf), 게인.
recorder-worklet.js를 모델로 → 마이크 입력 PCM을 받아 → 같은 워크릿에서 RMS 계산 → 메인 스레드로 postMessage → Canvas에 막대 그래프(VU 미터)로 그리기.
학습 포인트: AudioWorklet 등록·메시지 전달, 오디오 스레드와 메인 스레드 분리.
리포지토리 clone → go run audiomass-server.go로 로컬 확인 → Nginx 정적 호스팅으로 옮기기 → 자체 도메인 + HTTPS(Let's Encrypt) → 회사 인트라넷 전용 오디오 편집기로 운영.
학습 포인트: 정적 사이트 배포, MIME 타입 설정(WASM은 application/wasm), Service Worker 캐싱 전략, 마이크 권한 요구하는 HTTPS 환경.
8주 코스 — AudioMass를 기반으로 웹 오디오 마스터 되기
MDN Web Audio API 튜토리얼 정독. AudioContext, AudioBufferSourceNode, GainNode, destination 노드 그래프 그려 보기. 가장 단순한 "재생/일시정지/볼륨 조절" 만들기.
BiquadFilterNode(EQ), DynamicsCompressorNode, ConvolverNode(리버브), DelayNode, AnalyserNode(FFT). 각각 1시간씩 데모 만들기.
wavesurfer.js 공식 예제 → 직접 Canvas에 그리기로 옮겨 보기. AudioBuffer.getChannelData()로 Float32Array 받아 peak/RMS 계산해서 그리는 알고리즘 익히기.
getUserMedia로 마이크 권한 받기. AudioWorklet 등록·통신·PCM 캡처. 옛 ScriptProcessorNode와의 차이.
app.js → state.js → engine.js → actions.js 순서로 읽기. 이벤트 버스 패턴 추적. 큰 파일이지만 모든 함수가 이벤트 하나에 묶여 있어 따라가기 쉽다.
Emscripten 설치 → C로 짠 단순 DSP(예: 단순 reverb)를 WASM 빌드 → JS에서 호출. rnn_denoise.js 구조 참고.
"The Scientist and Engineer's Guide to DSP" 1~5장. FFT, 필터 설계, 윈도잉. Web Audio가 가려 주는 수학을 본격 학습.
본인만의 미니 오디오 앱 만들기. 예: 보컬 추출기(스테레오 차 + 노이즈 제거), 라이브 코러스 메이커, 노래방 모드 만들기 등.
레포에 등장하는 기술 용어 한 줄 풀이
DynamicsCompressorNode로 구현.lame.js 534 KB)을 사용해 브라우저 안에서 MP3 export를 가능케 한다.manifest.json + Service Worker 두 가지가 핵심. AudioMass는 "홈 화면에 추가"로 데스크탑 아이콘이 박힌다.app.js의 fireEvent/listenFor가 그 구현체.레포·라이브 데모·관련 학습 자료
audiomass.co 열기. 설치 없음. 로그인 없음.