- Published on
브라우저 안에서 ffmpeg 를 돌려 오디오를 변환하는 유틸을 짰다. 멀티스레드 코어는 광고를 깨고, 단일스레드 코어는 30MiB라 Cloudflare Pages 25MiB 한계에 걸린다. gzip 셀프 호스팅 + 클라이언트 DecompressionStream + Batch 모드 + 다운로드 진행률 UX로 정리한 이야기.
Audio
All Posts
- javascript (24)
- functional-programming (18)
- til (15)
- typescript (13)
- pegboard (12)
- dev-log (12)
- youtube (8)
- web (8)
- iterable (7)
- websocket (7)
- network (7)
- iterator (6)
- ai (5)
- lazy-evaluation (5)
- nextjs (4)
- google (4)
- generator (4)
- matt-pocock (4)
- theo (3)
- css (3)
audio (3)
- reduce (3)
- debugging (3)
- ssg (3)
- react (3)
- localstorage (3)
- generics (3)
- agents (2)
- llm (2)
- polymorphism (2)
- pipe (2)
- go (2)
- promise (2)
- async (2)
- monad (2)
- iframe (2)
- sandbox (2)
- lz-string (2)
- fxjs2 (2)
- lodash (2)
- ramda (2)
- comparison (2)
- cloudflare (2)
- claude-code (2)
- skills (2)
- hydration (2)
- monaco (2)
- abdul-bari (2)
- animation (1)
- baseline (1)
- function-overloads (1)
- function (1)
- project (1)
- alphago (1)
- internet (1)
- gemini (1)
- cli (1)
- has (1)
- selector (1)
- getusermedia (1)
- mediadevices (1)
- audiocontext (1)
- web-audio-api (1)
- map (1)
- filter (1)
- arguments (1)
- rest-parameter (1)
- curry (1)
- refactoring (1)
- performance (1)
- eager-evaluation (1)
- type-system (1)
- overloading (1)
- composition (1)
- flatten (1)
- kleisli-composition (1)
- functor (1)
- applicative (1)
- category-theory (1)
- browser (1)
- url (1)
- base64 (1)
- encoding (1)
- playground (1)
- state-machine (1)
- xstate (1)
- fsm (1)
- design-pattern (1)
- side-project (1)
- i18n (1)
- design-system (1)
- shadcn (1)
- brand (1)
- wasm (1)
- ffmpeg (1)
- webgpu (1)
- gemma (1)
- on-device-ai (1)
- analytics (1)
- ga4 (1)
- search-console (1)
- strategy (1)
- seo (1)
- orchestration (1)
- adr (1)
- context-md (1)
- ddd (1)
- dnd-kit (1)
- next (1)
- excalidraw (1)
- indexeddb (1)
- static-export (1)
- diff (1)
- flexbox (1)
- coding2go (1)
- cloud-computing (1)
- kevin-powell (1)
- agent-skills (1)
- web-dev-simplified (1)
- architecture (1)
- reference (1)
- Published on
MediaStream을 획득했다면 이제 본격적으로 오디오를 처리할 차례다. Web Audio API의 핵심인 AudioContext를 이해하고, 마이크 입력을 오디오 그래프에 연결하는 방법을 알아보자.- Published on
웹 브라우저에서 오디오를 녹음하려면 먼저 사용자의 마이크 접근 권한을 얻어야 한다. `getUserMedia`를 호출하면 그냥 되는거 아니냐 라고 쉽게 말할 수 있다. 하지만 이게 은근히 알아둬야 할 내용이 많이 있다.