MusicJumper/index.html at master · nateperry/MusicJumper · GitHub

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
<!doctype html>
<html>
<head>
	<title>Music Jumper</title>
	<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
	<canvas id="canvas">Please install a modern browser.</canvas>
	<div id="tracklist-container">
		<div class="inner">
			<ul id="tracklist">
				<li><a href="#Song" class="track" data-track-name="OVERWERK - Buzzin'">Buzzin' by OVERWERK</a></li>
				<li><a href="#Song" class="track" data-track-name="Dark Dark Dark - Bright Bright Bright">Bright Bright Bright by Dark Dark Dark </a></li>
				<li><a href="#Song" class="track" data-track-name="Brave Bird - Scared Enough">Scared Enough by Brave Bird</a></li>
				<li><a href="#Song" class="track" data-track-name="JJ Grey & Mofro - 99 Shades Of Crazy">99 Shades of Crazy by JJ Grey and Mofro</a></li>
				<li><a href="#Song" class="track" data-track-name="The Toobes - On The Radio">On The Radio by The Toobes</a></li>
			</ul>
			<p>The music provided was legally downloaded from <a href="http://www.last.fm/music/+free-music-downloads">Last.FM</a>. I do not own the rights to any of these songs.</p>
			<div class="panel-button">
				<h3>Choose a Song</h3>
			</div>
		</div>
	</div>
	<div id="controls">
		<audio id="audio" preload="auto" tabindex="0" controls="">
		  Your browser does not support the audio element.
		</audio>
	</div>
	<div class="instruction-cta open">
		<div class="inner">
			<h2>Instructions</h2>
			<p>To start, choose a song from the list above. Clicking the song name will start the song.</p>
			<ul id="key-controls">
				<li class="item">
					<h3 class="command">Play / Pause</h3>
					<span class="control">Spacebar</span>
				</li><li class="item">
					<h3 class="command">Left</h3>
					<span class="control">A or Left Arrow</span>
				</li><li class="item">
					<h3 class="command">Right</h3>
					<span class="control">D or Right Arrow</span>
				</li><li class="item">
					<h3 class="command">Jump</h3>
					<span class="control">W or Up Arrow</span>
				</li>
			</ul>
			<footer>
				<p>Created by <a href="http://thenateperry.com" target="_blank">Nate Perry</a></p>
			</footer>
		</div>
	</div>
	<div class="mobile-warning">
		<div class="inner">
			<h1>Sorry</h1>
			<p>Unfortunately this project does not work well on small devices.</p>
		</div>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="dancerjs/dancer.js"></script>
	<script type="text/javascript" src="dancerjs/plugins/dancer.waveform.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>