music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
index, style: sketched rough layout in html/css
+37
-22
+21
-15
index.html
+21
-15
index.html
···
20
20
/>
21
21
<meta name="apple-mobile-web-app-title" content="deftoku" />
22
22
<link rel="manifest" href="/assets/site.webmanifest" />
23
+
<script type="module" src="/dist/bars.js"></script
23
24
</head>
24
25
25
26
<body>
27
+
<noscript> you need to enable javascript to run this app. </noscript>
26
28
<div class="main-content">
27
-
<div class="center">
28
-
<noscript>
29
-
you need to enable javascript to run this app.
30
-
</noscript>
31
-
<p>index</p>
29
+
<div class="bar top-bar">
30
+
<select name="resolution" id="res-select">
31
+
<option value="1080">1080p</option>
32
+
<option value="720">720p</option>
33
+
</select>
34
+
<select name="framerate" id="fps-select">
35
+
<option value="60">60fps</option>
36
+
<option value="30">30fps</option>
37
+
<option value="24">24fps</option>
38
+
</select>
39
+
<select name="visualizer" id="vis-select">
40
+
<option value="bars">bars</option>
41
+
</select>
42
+
</div>
43
+
<canvas width="1920" height="1080"></canvas>
44
+
<div class="bar bottom-bar">
45
+
<!--<input type="file" />-->
46
+
<button type="button">import audio</button>
47
+
<button type="button">export video</button>
32
48
</div>
33
49
</div>
34
-
<footer>
35
-
<p>
36
-
<b>
37
-
made by <a href="https://digi.rip/">digi.rip</a> / hosted @
38
-
<a href="https://wisp.place/">wisp.place</a> /
39
-
<a href="not yet">source</a> <
40
-
</b>
41
-
</p>
42
-
</footer>
43
-
<!--<script src="script.js"></script>-->
44
50
</body>
45
51
</html>
+16
-7
style.css
+16
-7
style.css
···
17
17
box-sizing: border-box;
18
18
min-height: 100dvh;
19
19
margin: 0;
20
-
padding: 40px;
21
-
/*background-color: var(--main-bg);*/
22
-
/*color: var(--text-color);*/
23
20
font-family:
24
21
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
25
22
"Noto Color Emoji", sans-serif;
···
32
29
justify-content: center;
33
30
}
34
31
35
-
.center {
32
+
.bar {
36
33
display: flex;
37
-
flex-direction: column;
38
-
align-items: center;
39
-
/*gap: var(--gap);*/
34
+
flex-direction: row;
35
+
justify-content: center;
36
+
position: fixed;
37
+
left: 0;
38
+
z-index: 999;
39
+
width: 100%;
40
+
height: 25px;
41
+
}
42
+
43
+
.top-bar {
44
+
top: 10px;
45
+
}
46
+
47
+
.bottom-bar {
48
+
bottom: 10px;
40
49
}
41
50
42
51
footer {