-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (85 loc) · 4.11 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
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Music Visualization Interactive</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:500|Roboto+Condensed:400,400i">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/vendor/keypress-2.1.4.min.js"></script>
</head>
<body>
<!--if lt IE 8
p.browserupgrade
| You are using an
strong outdated
| browser. Please
a(href='http://browsehappy.com/') upgrade your browser
| to improve your experience.
-->
<div class="content firstToggle">
<div class="container controls">
<button class="control" id="restartAll" type="button"><img src="img/restart.svg" alt="Skip to Start" title="Skip to Start"/></button>
<button class="control" id="togglePlayPause" type="button"><img src="img/play.svg" alt="Play" title="Play"/></button>
<button class="control" id="muteAll" type="button"><img src="img/mute.svg" alt="Mute All" title="Mute All"/></button>
</div>
<div class="container music-viz">
<div class="vid-wrapper">
<video class="music" id="drumbeat" src="video/drumbeat.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on tooltip"><span id="tip">Click Me!</span>
<h2 class="label">Drumbeat</h2>
</div>
</div>
<div class="vid-wrapper">
<video class="music" id="melody" src="video/melody.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on">
<h2 class="label">Melody</h2>
</div>
</div>
<div class="vid-wrapper">
<video class="music" id="bassline" src="video/bassline.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on">
<h2 class="label">Bassline</h2>
</div>
</div>
<div class="vid-wrapper">
<video class="music" id="background percussion" src="video/background percussion.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on">
<h2 class="label">Background Percussion</h2>
</div>
</div>
<div class="vid-wrapper">
<video class="music" id="chords1" src="video/chords1.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on">
<h2 class="label">Chords 1</h2>
</div>
</div>
<div class="vid-wrapper">
<video class="music" id="chords2" src="video/chords2.mp4" type="video/mp4" preload="auto" mediaGroup="music"></video>
<div class="cover cover-on">
<h2 class="label">Chords 2</h2>
</div>
</div>
</div>
<div class="container controls">
<button class="control" type="button" id="toggleAll">Invert Tracks</button>
</div>
<div class="info">
<h1>Easily perceive, explore, and appreciate the parts of a song by turning them on and off.</h1>
<p>Concept and Programming: Brian Liu</p>
<p>Music: <a id="link" href="https://www.youtube.com/watch?v=B7xai5u_tnk" target="_blank">“Monody” by TheFatRat</a></p>
<p>Icons: Google Material Icons and <a href="https://thenounproject.com/olenjansa/collection/band-equipment/" target="_blank">Band Equipment</a> Icons by Janika Leisalu from the Noun Project</p>
<p>Special Thanks: Greg Nelson, Claire Seidler, Joanna Tan, Emily Ge, Steffen Riener</p>
</div>
</div>
<div class="preload"><img src="img/pause.svg"></div>
<script src="js/plugins.js"></script>
<script src="js/min/main.min.js"></script>
</body>
</html>