music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
README: updated and added screenshot of cd-top visualizer
+51
-2
+51
-2
README.md
+51
-2
README.md
···
1
-
# deftoku - music visualizer
2
-
a music visualizer web app! inspired by [trill](https://trill.wisp.place)!
1
+
# deftoku - music video renderer
2
+
3
+
a music video renderer web app. import audio, pick a visualizer, and export visuals as a video. inspired by [trill](https://trill.wisp.place)!
4
+
5
+
6
+
7
+
## features
8
+
9
+
- **3 visualizers**: frequency bars, a spinning top-down cd, and a spinning bottom-up cd
10
+
- **import audio**: any format your browser supports
11
+
- **export video**: renders to webm (VP9 + Opus) via
12
+
[mediabunny](https://npmjs.com/package/mediabunny) (mp4 support coming at some point!)
13
+
- **configurable output**: resolution (240p–1080p), aspect ratio (16:9, 4:3, 1:1), framerate (24/30/60 fps), and quality presets
14
+
15
+
## stack
16
+
17
+
- [deno](https://deno.com) runtime
18
+
- typescript
19
+
- html5 canvas for rendering
20
+
- [esbuild](https://esbuild.github.io) for bundling
21
+
- web audio api (`OfflineAudioContext` + `AnalyserNode`) for frequency extraction
22
+
23
+
## running
24
+
25
+
```sh
26
+
install deno
27
+
deno task dev # start dev server at http://localhost:8000
28
+
deno task build # bundle to dist/dist.js
29
+
```
30
+
31
+
## project structure
32
+
33
+
```
34
+
src/
35
+
├── mod.ts # entry point
36
+
├── controller.ts # ui wiring, canvas management, export trigger
37
+
├── import.ts # audio decoding + frequency frame extraction
38
+
├── export.ts # video encoding pipeline (mediabunny)
39
+
└── visualizers/
40
+
├── bars.ts # frequency bars
41
+
├── cd-top.ts # spinning CD (top label)
42
+
└── cd-bottom.ts # spinning CD (bottom label)
43
+
```
44
+
45
+
### whats that name?
46
+
47
+
deftones + kessoku band = deftoku :)
48
+
49
+
### this code is kinda bad!
50
+
51
+
yup!
cd-top.png
cd-top.png
This is a binary file and will not be displayed.