-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (97 loc) · 3.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sheet Music Sightreading Trainer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Sheet Music Sightreading Practice</h1>
<button id="resume" class="btn btn-primary btn-lg">Click here if using iOS</button>
<h2 id="loading"></h2>
</div>
<div id="settings" class="col-sm-2">
<p></p>
<select id="music">
<option value="Random">Pick a song!</option>
<option value="Random">Randomly Generated </option>
<option value="Ode to Joy">Ode to Joy (Suggested BPM : 120)</option>
<option value="Fur Elise">Fur Elise (Suggested BPM: 155)</option>
<option value="Coming Soon">More coming soon!</option>
</select>
<button id="playmusic">Play!</button>
<p></p>
<input type="checkbox" id="barcheckbox">Play notes at your own pace?
<br>
<img id="bpmimg" src="Images\bpmfield.png" alt="" width="80" height="50">
<input type="text" id="bpm" value="60">
<p></p>
<br>
<input type="checkbox" id="_sharpcheckbox" checked>Randomly generate sharps?
<br>
<input type="checkbox" id="wholecheckbox" checked>Randomly generate whole notes?
<p></p>
<div class="col-sm-10">
<input type="range" id="minnote" min="0" max="25" value="0">
<span id="minnotedisplay">Lowest Note: </span>
<br>
<input type="range" id="maxnote" min="0" max="26" value="26">
<span id="maxnotedisplay">Highest Note: </span>
</div>
</div>
<div id="container" class="col-sm-6">
<img id="staff" src="Images\staff.png" alt="" width="900" height="230">
<img id="bar" src="Images\bar.png" alt="" width="2" height="230">
<img id="Extra" src="Images\halfnoteupwithline.png" alt="" width="29" height="70">
<img id="sharpExtra" src="Images\sharp.png" alt="" width="12" height="40">
<p>First, allow microphone access. Once calibrated, select a song and press play. You should then start playing the notes
on your instrument as the bar passes over them.</p>
<p>If you wish to change which notes will be randomly generated, please drag the sliders above. Check or uncheck the boxes
above if you want or don't want sharps and whole notes</p>
<p>Website will automatically use your microphone to determine whether you are playing the correct note: once you do, the
note will dissapear. You may then continue and play the next note.</p>
<p>If you don't play the notes while the bar passes over them, they will turn red. You should continue to the next note once
this happens.</p>
<p>Once the bar reaches the end (or every note is played if disabled) a new random sequence of notes is generated. Rinse and
repeat. Read and play the notes as fast as you can!</p>
<p>Send feedback to akashmozumdar@gmail.com</p>
<p>v11.00.00</p>
</div>
<style>
div[id="container"] {
position: relative
}
img[id="bar"] {
position: absolute;
top: 0px;
left: 135px;
}
img[id^="note"] {
position: absolute;
top: 47px;
left: 200px;
}
img[id="Extra"] {
position: absolute;
top: 47px;
left: 870px;
}
img[id^="sharp"] {
position: absolute;
top: 89px;
left: 140px;
}
img[id="sharpExtra"] {
position: absolute;
top: 89px;
left: 860px;
}
</style>
<script src="main.js"></script>
<script src="songs.js"></script>
<script src="pageSetup.js"></script>
</body>
</html>