-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (165 loc) · 8.88 KB
/
Copy pathindex.html
File metadata and controls
181 lines (165 loc) · 8.88 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<!--for MIDI-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/abcjs@5.1.2/abcjs-midi.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<!-- Required to convert named colors to RGB -->
<script src="https://cdn.jsdelivr.net/npm/rgbcolor@^1/index.js"></script>
<!-- Optional if you want blur -->
<script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
<!-- Main canvg code -->
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<script src="./selectButtons.js" type="text/javascript"></script>
<script src="./speech-to-text.js" type="text/javascript"></script>
<script src="./words-to-syllables.js" type="text/javascript"></script>
<script src="./progressBar.js" type="text/javascript"></script>
<script src="./detect-key.js" type="text/javascript"></script>
<script src="./renderSheetMusic.js" type="text/javascript"></script>
<title>Noteable</title>
</head>
<body>
<h1 id="logo">
<img src="images/Title.png" alt="Noteable Logo">
</h1>
<div id="input-main-content" class="main-content">
<h3 id="input-prompt">Before you can record, please give us the following:</h3>
<div id="buttons-container">
<div class="main-button" id="key-signature-button" onclick="addSelected('key-signature')">
Key Signature
<div id="key-signature-confirmation" class="confirmation"></div>
<span class="tooltip-bottom tooltip">The group of pitches that indicates how your piece will
sound</span>
</div>
<div class="main-button" id="tempo-button" onclick="addSelected('tempo')">
Tempo
<div id="tempo-confirmation" class="confirmation"></div>
<span class="tooltip-bottom tooltip">How fast or slow the music is. It is measured in beats per
minute.</span>
</div>
<div class="main-button" id="time-signature-button" onclick="addSelected('time-signature')">
Time Signature
<div id="time-signature-confirmation" class="confirmation"></div>
<span class="tooltip-bottom tooltip">Indication of rhythm. Numerator: number of beats per measure.
Denominator: What type of note gets a beat</span>
</div>
</div>
<div class="input-content">
<!-- All the content we will be adding and removing should appear here -->
<div id="key-signature-input" class="hidden">
<label id="auto-detect-key-signature-container" class="checkbox-container">
<input id="auto-detect-key-signature" type="checkbox" onclick="disable_input('key-signature')">
<span class="checkmark"></span>
Auto-detect after recording <br />
</label>
<div id="key-signature-input-contents">
<h3>Input Key Signature:</h3>
<form id="key-signature-form" onsubmit="submitForm('key-signature'); return false">
<div class="input-container custom-select">
<select id="key-signature-selector" name="key-signature">
<option value="Ab">A♭</option>
<option value="A">A</option>
<option value="Bb">B♭</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="C#">C♯</option>
<option value="Db">D♭</option>
<option value="D">D</option>
<option value="Eb">E♭</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F♯</option>
<option value="Gb">G♭</option>
<option value="G">G</option>
</select>
</div>
<input type="submit" value="Submit" class="primary button">
</form>
</div>
</div>
<div id="tempo-input" class="hidden">
<h3>Input Tempo: </h3>
<form onsubmit="submitForm('tempo'); return false">
<div class="input-container">
<input type="number" name="tempo" min="1" max="256" value="120" required>
</div>
<input type="submit" value="Submit" class="primary button">
</form>
<div id="detect-tempo-div">
<button id="detect-tempo-button" class="primary button">Detect Tempo</button>
<div id="detecting-tempo-div" class="hidden">
<h3>Tap spacebar to the beat</h3>
<h2 id="tempo-countdown">10 times</h2>
</div>
</div>
</div>
<div id="time-signature-input" class="hidden">
<h3>Input Time Signature: </h3>
<form onsubmit="submitForm('time-signature'); return false">
<div class="input-container">
<input type="number" name="time-signature-top-num" min="1" max="99" value="4" required>
<hr />
<input type="number" name="time-signature-bottom-num" min="1" max="99" value="4"
oninput="checkPowerOfTwo();" required>
</div>
<input type="submit" value="Submit" class="primary button">
</form>
</div>
</div>
</div>
<div id="metronome-main-content" class="main-content hidden">
<div class="metro-container" id="metronomeGuy">
<div class="countdown" id="countdown"></div>
<div id="circ"> </div>
</div>
</div>
<div id="progress-bar-main-content" class="main-content hidden">
<h2>Progress:</h2>
<div id="progress-bar">
<div id="progress-fill"></div>
</div>
</div>
<div id="sheet-music-main-content" class="main-content hidden">
<div id="sheet-music"></div>
<label id="bottom-lyrics-container" class="checkbox-container">
<input id="bottom-lyrics" type="checkbox" onclick="toggleLyrics()" checked>
<span class="checkmark"></span>
Place lyrics in sheet music<br />
</label>
<div class="button-container">
<button id="edit-button" class="secondary button">Edit</button>
<button class="secondary button" id="download-sheet">Download Sheet</button>
<button class="secondary button" id="download-midi">Download MIDI</button>
</div>
</div>
<div id="mic-icon" class="disabled-button recording-button">
<span id="disabled-record-tooltip" class="tooltip-top tooltip">Please provide us the key signature, tempo, and
time signature before recording</span>
<span id="enabled-record-tooltip" class="tooltip-top tooltip hidden">Click to Record</span>
<img src="images/microphone.png" alt="start recording">
</div>
<div id="stop-icon" class="recording-button hidden">
<img src="images/stop_recording.png" alt="stop recording">
</div>
<div id="retry-icon" class="recording-button hidden">
<span id="retry-tooltip" class="tooltip-top tooltip">Click to try again</span>
<img src="images/retry_button.png" alt="retry recording">
</div>
<div id="re-render-button-container" class="button-container hidden">
<button id="re-render-button" class="primary button re-render-button">Re-render</button>
</div>
<!-- this is just for testing purposes to confirm recordings and can be removed later-->
<div id="transcriptionsList"></div>
<script>
require('./renderer.js');
</script>
<!--It should be noted that rawgit is going to be shut down on October 2019, so I'll look into a more sustainable host for Recorderjs-->
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<!--dropdownList used to create the custom select for the key signature-->
<script src="./dropdownList.js" type="text/javascript"></script>
</body>
</html>