-
Notifications
You must be signed in to change notification settings - Fork 0
/
music.html
37 lines (37 loc) · 2.15 KB
/
music.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="media/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rokkitt|Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel='stylesheet'>
<title>Ryan Bell</title>
</head>
<body>
<header>
<a class="inner" href="./index.html" >RYAN BELL</a>
</header>
<div class = "project-page">
<p class="tagline">Music Visualizer</p>
<div class = "image-list">
<p>I made this music visualizer with Processing. The title, composed of small dots come into focus with the use of Guassian blur.</p>
<img src = "./media/musictitle.png">
<p>The dots are placed randomly using an alpha mask of the title generated on startup. The title is disintegrated and the main visualizer is faded in.</p>
<img src = "./media/musicdisint.png">
<p>The main music visualizer shows the waveform for the song at the top and the bottom as well as a large, stationary dot in the middle which pulsates based on the minim beat detection algorithm.</p>
<img src = "./media/musiccap1.png">
<p>A spectrograph is also shown on the right and dots move from right to left in the background at different rates to give an illusion of movement. The dots differing size and speed make it look as if the large dot is floating through space.</p>
<img src = "./media/musiccap2.png">
<p>At the end of the song, the ID3 tags are pulled and information such as the song title, author, album and duration are shown.</p>
<img src = "./media/musicend.png">
</div>
</div>
<a href="https://github.com/Ryan-Bell/processingmusicvisualizer">
<img class="github" src="./media/githublogo.svg">
</a>
</body>
</html>