silentsilas/audio-visualizer
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

add poem with background song, style things, parse and display subtitles, add stars and orbiting light, add camera movement

Browse Source
This commit is contained in:
Silas
2022-03-15 01:08:10 -04:00
parent c182456a21
commit b8d15577f3
18 changed files with 488 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@@ -5,57 +5,51 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Audio Visualizer</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body style="margin: 0; background: black">
<div id="container">
<div id="loader">Loading model: 0%</div>
<div id="startButton" style="display: none">BEGIN</div>
<div
id="loader"
id="debug"
style="
color: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"
>
Loading model: 0%
</div>
<div
id="startButton"
style="
top: 0px;
right: 0px;
color: #efefef;
display: none;
color: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 25px;
border: 2px solid #efefef;
text-align: center;
padding: 20px 40px;
cursor: pointer;
"
>
BEGIN
</div>
></div>
<div id="subtitles"></div>
</div>
<div
style="
position: absolute;
left: 50%;
bottom: 0px;
color: #efefef;
font-size: 10px;
transform: translateX(-50%);
max-width: 800px;
width: 100%;
"
>
<div style="padding: 8px">
"Low Poly Human Hands (All Quads)" (https://skfb.ly/WuXz) by Jeremy E.
Grayson is licensed under Creative Commons Attribution
(http://creativecommons.org/licenses/by/4.0/).
<div id="credits" style="display: none">
<div style="padding: 20px; background-color: rgba(0, 0, 0, 0.5)">
CREDITS:
<p>
Song: Space Chillout by
<a
href="/users/penguinmusic-24940186/?tab=audio&amp;utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=audio&amp;utm_content=14194"
>penguinmusic</a
>
from
<a
href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=music&amp;utm_content=14194"
>Pixabay</a
>.
</p>
<p>
3D Hand Model: "Low Poly Human Hands (All Quads)" by
<a href="https://skfb.ly/WuXz">Jeremy E. Grayson</a>.
</p>
<p>Poem & coding by yours truly.</p>
<p>
View the
<a href="https://git.silentsilas.com/silentsilas/audio-visualizer"
>source code</a
>.
</p>
</div>
</div>
<script src="dist/index.js"></script>