-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (99 loc) · 3.47 KB
/
index.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./lib/bundle.js"></script>
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<title>Droog</title>
</head>
<body>
<div class="modal" id="about">
<h2>Droog</h2>
<p><i>"There was me, that is Alex, and my three droogs, that is Pete, Georgie, and Dim, and we sat in the Korova Milkbar trying to make up our rassoodocks what to do with the evening."</i></p>
<p>Droog is a customizable audio visualizer which can generate two types of wave representations for both uploaded audio files and user microphone input. Feel free to try it out on either the preloaded sample track or any mp3 file of your choosing. Click "about" below to return to this window at any time.</p>
<a href="#">Close</a>
</div>
<section id="body-content">
<h1 id="masthead">Droog</h1>
<div id="underline">
<div id="progress-bar"></div>
</div>
<section id="main">
<div id="controls">
<div id="song-info">
<h3>Current Song:</h3>
<p id="song-title">"Bitches Brew"</p>
<p id="song-artist">Miles Davis</p>
</div>
<div id="upload-button">
<input
id="song-file"
type="file"/>
<label for="song-file">Upload a song</label>
</div>
<div id="microphone">
<i class="fa fa-microphone" aria-hidden="true"></i>
</div>
<div id="play-controls">
<div>
<i class="fa fa-play" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-pause" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="display">
<section id="outer-bar">
<section class="little-bar">
</section>
</section>
</div>
<div id="customizer">
<div class="color-picker" id="top">
<ul>
<li class="red">
<div class="color-mark" id="top-red"></div>
</li>
<li class="green">
<div class="color-mark" id="top-green"></div>
</li>
<li class="blue">
<div class="color-mark" id="top-blue"></div>
</li>
</ul>
<div id="top-sample">
</div>
</div>
<div id="form-select">
<p class="selected" id="osc">Grounded</p>
<p id="cent">Floating</p>
<p id="conc">Concentric</p>
</div>
<div class="color-picker" id="bottom">
<div id="bottom-sample">
</div>
<ul>
<li class="red">
<div class="color-mark" id="bottom-red"></div>
</li>
<li class="green">
<div class="color-mark" id="bottom-green"></div>
</li>
<li class="blue">
<div class="color-mark" id="bottom-blue"></div>
</li>
</ul>
</div>
</div>
</section>
<audio id="audio" src="./assets/Bitches_Brew.mp3"></audio>
<div id="footer">
<a href="#" id="about-link">About</a>
<a href="http://gabrielice.com">Main</a>
</div>
</section>
</body>
</html>