-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTranscribeNotes.html
More file actions
135 lines (134 loc) · 5.98 KB
/
TranscribeNotes.html
File metadata and controls
135 lines (134 loc) · 5.98 KB
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
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name = 'viewport' content = 'width=device-width, initial-scale=1, user-scalable=0'>
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<link rel="stylesheet" href="./Musicality.css">
<!-- 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>
<!-- 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>
<!-- VexFlow -->
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></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>
<script src="./js/dropdown.js" type="text/javascript"></script>
<script src="./js/Musicality.js" type="text/javascript"></script>
<script src="./js/TranscribeNotes.js" type="text/javascript"></script>
</head>
<body>
<div class="panel">
<table class="width100 menuTable">
<tr class="menuRow">
<td class="width20 menuLink"><a href="./IntervalRecognition.html">Recognise</a></td>
<td class="width20 menuLink"><a href="./IntervalSing.html">Sing</a></td>
<td class="width20 menuLink"><a href="./SequenceSing.html">Sequence</a></td>
<td class="width20 menuLink"><a href="./TranscribeNotes.html">Transcribe</a></td>
<td class="width20 menuLink"><a href="./Musicality.html">Help</a></td>
</tr>
</table>
<h1>Musicality: Transcribe Notes</h1>
<p>Write down on paper the notes played and then check your answer.</p>
<table class="width100">
<tr>
<td class="centeredButton width20"><button id="buttonNew" class="width90" >New</button></td>
<td class="width30"><span>Length: </span><input type="number" id="seqLen" min="3" max="15" value="8"></td>
<td class="width50">
<div class="dropdown">
<span>Difficulty: </span><button id="difficulty" onclick="toggleDropdown('difficultyDropdown')" class="dropbtn">Stepwise</button>
<button onclick="toggleDropdown('difficultyDropdown')" class="dropbtn">▾</button>
<div id="difficultyDropdown" class="dropdown-content">
<a class="difficulty" href="#">Stepwise</a>
<a class="difficulty" href="#">Triad Leaps</a>
<a class="difficulty" href="#">Moderate Leaps</a>
<a class="difficulty" href="#">Random Leaps</a>
<a class="difficulty" href="#">Modal Borrow 1</a>
<a class="difficulty" href="#">Modal Borrow 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td class="width30">
<div class="dropdown">
<span>Key: </span><button id="keyChoice" onclick="toggleDropdown('keyChoiceDropdown')" class="dropbtn">C</button>
<button onclick="toggleDropdown('keyChoiceDropdown')" class="dropbtn">▾</button>
<div id="keyChoiceDropdown" class="dropdown-content">
<a class="keyChoice" href="#">C</a>
<a class="keyChoice" href="#">C♯</a>
<a class="keyChoice" href="#">D</a>
<a class="keyChoice" href="#">E♭</a>
<a class="keyChoice" href="#">E</a>
<a class="keyChoice" href="#">F</a>
<a class="keyChoice" href="#">F♯</a>
<a class="keyChoice" href="#">G</a>
<a class="keyChoice" href="#">A♭</a>
<a class="keyChoice" href="#">A</a>
<a class="keyChoice" href="#">B♭</a>
<a class="keyChoice" href="#">B</a>
</div>
</div>
</td>
<td class="width50">
<div class="dropdown">
<span>Mode: </span><button id="mode" onclick="toggleDropdown('modeDropdown')" class="dropbtn">Major</button>
<button onclick="toggleDropdown('modeDropdown')" class="dropbtn">▾</button>
<div id="modeDropdown" class="dropdown-content">
<a class="mode" href="#">Major</a>
<a class="mode" href="#">Natural Minor</a>
<a class="mode" href="#">Harmonic Minor</a>
<a class="mode" href="#">Melodic Minor</a>
<a class="mode" href="#">Ionian</a>
<a class="mode" href="#">Dorian</a>
<a class="mode" href="#">Phrygian</a>
<a class="mode" href="#">Lydian</a>
<a class="mode" href="#">Mixolydian</a>
<a class="mode" href="#">Aeolian</a>
<a class="mode" href="#">Locrian</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="width20"></td>
<td class="width30"></td>
<td class="width50">
<div class="dropdown">
<span>Speed: </span><button id="speed" onclick="toggleDropdown('speedDropdown')" class="dropbtn">Medium</button>
<button onclick="toggleDropdown('speedDropdown')" class="dropbtn">▾</button>
<div id="speedDropdown" class="dropdown-content">
<a class="speed" href="#">Fast</a>
<a class="speed" href="#">Medium</a>
<a class="speed" href="#">Slow</a>
</div>
</div>
</td>
</tr>
</table>
<span id="instructions" class="width100 centeredText"></span>
<table class="width100">
<tr>
<td class="width20 centeredButton"><button id="buttonAgain" class="width90 disabled" >Repeat</button></td>
<td class="width60 centeredText"></td>
<td class="width20 centeredButton"><button id="buttonAnswer" class="width90 disabled" >Answer</button></td>
</tr>
</table>
<span id="answerText" class="width100 centeredText"></span>
<p/>
<label>Use Key Signature</label><input type="checkbox" id="useKeySig" name="useKeySig"></label>
<div id="renderedStaveWithoutKeySig" class="width100"></div>
<div id="renderedStaveWithKeySig" class="width100"></div>
</div>
</body>
</html>