-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (71 loc) · 3.45 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>See Major: Audio Visualizer</title>
<link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800|Londrina+Outline' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/cs-select.css">
<link rel="stylesheet" type="text/css" href="css/cs-skin-rotate.css">
<link rel="stylesheet" type="text/css" href="css/buttons.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
</head>
<body>
<div class="container">
<h1 class="title">See Major<a href="website.html"><span class="fa fa-info-circle"></span></a></h1>
<div class="text song">Song</div>
<div class="text audio">Audio Source</div>
<div class="text viz">Visualization</div>
<audio id="audioElement" src="audio/kanye.mp3" preload="auto"></audio>
<ol class="grid">
<li class="grid__item btn">
<button id="play" class="icobutton play-button" onclick="togglePlay()"><span class="fa fa-play"></span></button>
</li>
<li class="btn">
<button class="icobutton volume" onclick="document.getElementById('audioElement').volume-=0.1" title="Softer"><span class="fa fa-minus"></span></button>
</li>
<li class="btn">
<button class="icobutton volume" onclick="document.getElementById('audioElement').volume+=0.1" title="Louder"><span class="fa fa-plus"></span></button>
</li>
<li class="btn">
<select id="audioSelect" class="cs-select cs-skin-rotate">
<option value="1">Kanye West</option>
<option value="2">Taylor Swift</option>
<option value="3">Yeezer</option>
<option value="4">Childish Gambino</option>
<option value="5">Mura Masa</option>
<option value="6">Jamie xx</option>
<option value="7">Noname</option>
</select>
</li>
<li class="btn">
<button id="original" class="button button--wayra button--border-medium button--size-s highlight"><span>Original</span></button>
</li>
<li class="btn">
<button id="background" class="button button--wayra button--border-medium button--size-s">Beat</button>
</li>
<li class="btn">
<button id="bar" class="button button--wayra button--border-medium button--size-s highlight"><span class="fa fa-signal"></button>
</li>
<li class="btn">
<button id="circle" class="button button--wayra button--border-medium button--size-s button--right"><span class="fa fa-circle-o"></button>
</li>
</ol>
</div>
<div id="visualizer"></div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/visualize.js"></script>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
</script>
</body>
</html>