handbell-hero/index.html at master · bucknerbg27/handbell-hero · 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
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
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link type="text/css" href="css/mycss.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<!-- polyfill -->
	<script src="inc/shim/Base64.js" type="text/javascript"></script>
	<script src="inc/shim/Base64binary.js" type="text/javascript"></script>
	<script src="inc/shim/WebAudioAPI.js" type="text/javascript"></script>
	<script src="inc/shim/WebMIDIAPI.js" type="text/javascript"></script>
	<!-- jasmid package -->
	<script src="inc/jasmid/stream.js"></script>
	<script src="inc/jasmid/midifile.js"></script>
	<script src="inc/jasmid/replayer.js"></script>
	<!-- midi.js package -->
	<script src="js/midi/audioDetect.js" type="text/javascript"></script>
	<script src="js/midi/gm.js" type="text/javascript"></script>
	<script src="js/midi/loader.js" type="text/javascript"></script>
	<script src="js/midi/plugin.audiotag.js" type="text/javascript"></script>
	<script src="js/midi/plugin.webaudio.js" type="text/javascript"></script>
	<script src="js/midi/plugin.webmidi.js" type="text/javascript"></script>
	<script src="js/midi/player.js" type="text/javascript"></script>
	<script src="js/midi/synesthesia.js" type="text/javascript"></script>
	<!-- utils -->
	<script src="js/util/dom_request_xhr.js" type="text/javascript"></script>
	<script src="js/util/dom_request_script.js" type="text/javascript"></script>
	<!-- includes -->
	<script src="inc/timer.js" type="text/javascript"></script>
	<script src="inc/colorspace.js" type="text/javascript"></script>
	<script src="inc/event.js" type="text/javascript"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script>
	<script src="js/snow.js"></script>
</head>
<body style="margin: 0px; background: black;">
	<div class="midi-container">
		<canvas id="canvas" width="800px" height="1600px"></canvas>
		<img class="holly-img" src="images/handbell-hero-holly-01.png"></img>
		<img class="title-img" src="images/handbell-hero-01.png"></img>
		<table>
			<thead>
				<th>Song Title</th>
				<th></th>
			</thead>
			<!-- <tr>
				<td>Angels We Have Heard</td>
				<td><a href="#" class="play-song" data-song="Angels-We-Have-Heard.mid">Play</a></td>
			</tr> -->
			<tr>
				<td>Deck the Halls</td>
				<td><a href="#" class="play-song" data-song="Deck-The-Halls.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>Jingle Bells</td>
				<td><a href="#" class="play-song" data-song="Jingle-Bells.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>Joy to the World</td>
				<td><a href="#" class="play-song" data-song="Joy-To-The-World.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>Ode to Joy</td>
				<td><a href="#" class="play-song" data-song="Ode-To-Joy.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>Super Christmas</td>
				<td><a href="#" class="play-song" data-song="Super-Christmas.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>The First Noel</td>
				<td><a href="#" class="play-song" data-song="The-First-Noel.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>Up On the House Top</td>
				<td><a href="#" class="play-song" data-song="Up-On-The-House-Top.mid">Play Song</a></td>
			</tr>
			<tr>
				<td>We Wish You a Merry Christmas</td>
				<td><a href="#" class="play-song" data-song="We-Wish-You-A-Merry-Christmas.mid">Play Song</a></td>
			</tr>
			<tr>
				<td style="text-align: center;"><a href="#" class="mute">Stop and Mute</a></td>
				<td></td>
			</tr>
			<tr>
				<td style="text-align: center;"><a href="./bell">Go to Bell!</a></td>
				<td></td>
			</tr>
		</table>
	</div>
	<script src="js/main.js"></script>
</body>
</html>