deftoku - music video renderer#

a music video renderer web app. import audio, pick a visualizer, and export visuals as a video. inspired by trill!

features#

• 3 visualizers: frequency bars, a spinning top-down cd, and a spinning bottom-up cd
• import audio: any format your browser supports
• export video: renders to webm (VP9 + Opus) via mediabunny (mp4 support coming at some point!)
• configurable output: resolution (240p–1080p), aspect ratio (16:9, 4:3, 1:1), framerate (24/30/60 fps), and quality presets

stack#

• deno runtime
• typescript
• html5 canvas for rendering
• esbuild for bundling
• web audio api (OfflineAudioContext + AnalyserNode) for frequency extraction

running#

install deno
deno task dev    # start dev server at http://localhost:8000
deno task build  # bundle to dist/dist.js

project structure#

src/
├── mod.ts                  # entry point
├── controller.ts           # ui wiring, canvas management, export trigger
├── import.ts               # audio decoding + frequency frame extraction
├── export.ts               # video encoding pipeline (mediabunny)
└── visualizers/
    ├── bars.ts             # frequency bars
    ├── cd-top.ts           # spinning CD (top label)
    └── cd-bottom.ts        # spinning CD (bottom label)

whats that name?#

deftones + kessoku band = deftoku :)

thank you jess for coming up with/letting me use this name!

this code is kinda bad!#

yup!