-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (185 loc) · 9.71 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tar Heel Music</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style/style.css" />
<!-- Load @magenta/music -->
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.3"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver"></script>
</head>
<body>
<div class="sound-button">
<div id="soundModeCtr" class="custom-control custom-switch hoverable hover">
<input type="checkbox" class="custom-control-input" id="soundMode">
<label class="custom-control-label" for="soundMode">Sound Mode</label>
</div>
</div>
<div class="overlay">
<div class="overlay-content">
<h3>Welcome to <span class="bolder">Tar Heel Music</span>!</h3>
<hr />
<div class="overlay-instructions">
<p>
Play real-time notes from four different instruments (drums, guitar, bass, piano) and continue your recorded
melody based off Machine Learning. Learn how to play below!
</p>
<h5>Play Notes</h5>
<ul>
<li>Press or click letters <span class="info-notes info-red">X</span>, <span
class="info-notes info-blue">C</span>, <span class="info-notes info-green">V</span>, <span
class="info-notes info-pink">B</span> to play notes.</li>
<li>Press <span class="info-notes info-purple">Z</span> to shuffle the note pitches.</li>
</ul>
<h5>Record Your Melody</h5>
<ul>
<li>Click <input type="button" id="info-record-button" class="btn btn-outline-danger info-button"
value="Record" tabindex="-1"></input> to start recording. To stop recording, click the button again.</li>
</ul>
<h5>Main Features</h5>
<ul>
<li><input type="button" class="btn btn-outline-success info-button" value="Download"
tabindex="-1"></input><span class="no-display">Download</span>
saves your original note sequence to your device as a MIDI file.</li>
<li><input type="button" class="btn btn-outline-primary info-button" value="Play with Magenta"
tabindex="-1"></input><span class="no-display">Play with Magenta</span>
continues your recorded note sequence using Machine Learning.</li>
<li><input type="button" class="btn btn-outline-dark info-button" value="2 Button Mode"
tabindex="-1"></input><span class="no-display">2 Button Mode</span> gives the
accessible option of playing notes with two larger buttons.</li>
<li>The <input type="button" class="btn btn-outline-info info-button" value="Play" tabindex="-1"></input><span
class="no-display">Play</span> button plays your original
recorded sequence.</li>
</ul>
<h5>Navigation</h5>
<ul>
<li>Use the left and right arrow keys to navigate through the app.</li>
<li>Press the up or down arrow keys to activate the hovered item.</li>
<li>Note: Sound Mode is the first element able to be activated.</li>
</ul>
</div>
<span class="no-display">Click the </span><button class="enter-button" id="enterApp">Let's Make
Music!</button><span class="no-display"> button to enter the app</span>
</div>
</div>
<div class="game">
<h3 id="title">Tar Heel Music</h3>
<hr />
<span class="no-display">. Instrument choices are: </span>
<div class="container">
<div class="row">
<div class="col-3">
<div class="list-group instruments" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active hoverable" id="drums-list" data-toggle="list"
href="#drums" role="tab" aria-controls="home">
<img src="./assets/images/drums.png" class="list-icons" alt="Drums">
Drums
</a>
<span class="no-display">, </span>
<a class="list-group-item list-group-item-action hoverable" id="guitar-list" data-toggle="list"
href="#guitar" role="tab" aria-controls="profile">
<img src="./assets/images/electric-guitar.png" class="list-icons" alt="Guitar">
Guitar
</a>
<span class="no-display">, </span>
<a class="list-group-item list-group-item-action hoverable" id="bass-list" data-toggle="list" href="#bass"
role="tab" aria-controls="messages">
<img src="./assets/images/bass-guitar.png" class="list-icons" alt="Bass">
Bass
</a>
<span class="no-display">, </span>
<a class="list-group-item list-group-item-action hoverable" id="piano-list" data-toggle="list" href="#piano"
role="tab" aria-controls="settings">
<img src="./assets/images/piano.png" class="list-icons" alt="Piano">
Piano
</a>
</div>
</div>
<!-- Content for each instrument. -->
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="drums" role="tabpanel" aria-labelledby="drums-list"></div>
<div class="tab-pane fade" id="guitar" role="tabpanel" aria-labelledby="guitar-list"></div>
<div class="tab-pane fade" id="bass" role="tabpanel" aria-labelledby="bass-list"></div>
<div class="tab-pane fade" id="piano" role="tabpanel" aria-labelledby="piano-list"></div>
</div>
<!-- Original Mode -->
<span class="no-display">. Original Mode note choices are the following: </span>
<div id="big-button-holder">
<div class="button-row">
<div class="big-button" id="top-left-button">
<p class="inline button-text"><span class="inner-text">X</span></p>
</div>
<span class="no-display">, </span>
<div class="big-button" id="top-right-button">
<p class="inline button-text"><span class="inner-text">C</span></p>
</div>
<span class="no-display">, </span>
</div>
<div class="button-row">
<div class="big-button" id="bottom-left-button">
<p class="inline button-text"><span class="inner-text">V</span></p>
</div>
<span class="no-display">, </span>
<div class="big-button" id="bottom-right-button">
<p class="inline button-text"><span class="inner-text">B</span></p>
</div>
<span class="no-display">, </span>
</div>
<div class="button-row">
<div class="big-button" id="bottom-button">
<p class="inline button-text"><span class="inner-text">Z (shuffle)</span></p>
</div>
</div>
</div>
<!-- 2 button mode -->
<span class="no-display">. Two Button Mode note choices are the following: </span>
<div id="two-button-holder">
<div class="button-col">
<div class="two-button" id="left-button">
<p class="two-button-text"><span class="inner-text">X</span></p>
</div>
<span class="no-display">, </span>
<div class="two-button" id="right-button">
<p class="two-button-text"><span class="inner-text">C</span></p>
</div>
<span class="no-display">, </span>
</div>
<div class="button-row">
<div class="big-button" id="two-bottom-button">
<p class="inline button-text"><span class="inner-text">Z (shuffle)</span></p>
</div>
</div>
</div>
<span class="no-display">. Features include: Record button, Download button, Play with Magenta,
Play button, Two Button Mode.</span>
<div class="controls">
<input id="record-button" type="button" class="btn btn-outline-danger hoverable" value="Record"></input>
<input id="download-button" type="button" class="btn btn-outline-success hoverable"
value="Download"></input>
<input id="play-magenta" type="button" class="btn btn-outline-primary hoverable"
value="Play with Magenta"></input>
<input id="play-button" type="button" class="btn btn-outline-info hoverable" value="Play"></input>
<input id="switch-button" type="button" class="btn btn-outline-dark hoverable"
value="2 Button Mode"></input>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="assets/js/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- WebMidi library for midi instruments. -->
<script src="https://cdn.jsdelivr.net/npm/webmidi"></script>
<script src="assets/js/main.js"></script>
</html>