-
Notifications
You must be signed in to change notification settings - Fork 24
/
abctools-quick-editor-offline.html
234 lines (173 loc) · 16.4 KB
/
abctools-quick-editor-offline.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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<title>Michael Eskin's ABC Tools Quick Editor</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<meta content="ABC player transpose jig reel folk folktab folktab.com" name="keywords">
<meta content="A simple-to-use ABC to standard music notation converter featuring tune play, transposition, tab generation, PDF export, and much more!" name="description">
<meta content="A simple-to-use ABC to standard music notation converter featuring tune play, transposition, tab generation, PDF export, and much more!" name="abstract">
<meta property="og:locale" content="en_US" />
<meta name="description" content="A simple-to-use ABC to standard music notation converter featuring tune play, transposition, tab generation, PDF export and much more!" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Michael Eskin's ABC Transcription Tools Quick Editor" />
<meta property="og:description" content="A simple-to-use ABC to standard music notation converter featuring tune play, transposition, tab generation, PDF export and much more!" />
<meta property="og:url" content="https://michaeleskin.com/abctools/abctools-quick-editor.html" />
<meta property="og:site_name" content="Michael Eskin's ABC Transcription Tools Quick Editor" />
<meta property="og:image" content="https://michaeleskin.com/abctools/img/abc-icon.png" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://michaeleskin.com/abctools/img/abc-ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-title" content="ABC Tools">
<meta name="application-name" content="ABC Tools">
<meta name="viewport" content="width=860" />
<link rel="apple-touch-icon" sizes="60x60" href="https://michaeleskin.com/abctools/img/abc-apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://michaeleskin.com/abctools/img/abc-apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://michaeleskin.com/abctools/img/abc-apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://michaeleskin.com/abctools/img/abc-apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://michaeleskin.com/abctools/img/abc-apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://michaeleskin.com/abctools/img/abc-apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://michaeleskin.com/abctools/img/abc-apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://michaeleskin.com/abctools/img/abc-apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://michaeleskin.com/abctools/img/abc-android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://michaeleskin.com/abctools/img/abc-favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://michaeleskin.com/abctools/img/abc-favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://michaeleskin.com/abctools/img/abc-favicon-16x16.png">
<link rel="manifest" href="https://michaeleskin.com/abctools/img/abc-manifest-qe.json">
<link href="app.css?v=2041" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app-container">
<div id="uioverlay" class="hidden-print">
<img id="helpbutton" class="helpbutton" src="img/helpbutton.png" title="Get help using the ABC Transcription Tools"/>
<img id="playbuttonicon" class="playbuttonicon" src="img/playbutton.png" title="Plays the current tune"/>
<img id="pdfbuttonicon" class="pdfbuttonicon" src="img/pdfbutton.png" title="Export the tunes as a PDF tunebook"/>
<img id="zoombutton" class="zoombutton" src="img/zoomout.png" title="Toggles between showing the ABC editor and displaying the notation full screen"/>
<div id="loading-bar-spinner" class="spinner">
<div id="spinner-icon" class="spinner-icon"></div>
</div>
<div id="pdf-controls" class="modal">
<div class="modal-content">
<div id="statuspdfname"></div>
<div id="statustunecount"></div>
<div id="pagestatustext"></div>
<input class="cancelpdf btn btn-cancelpdf" id="cancelpdf" onclick="CancelPDF();" type="button" value="Cancel"/>
</div>
</div>
<div id="fontholder">
<svg id="fontholdersvg">
<style></style>
</svg>
</div>
</div>
<div id="noscroller" class="noscroller">
<div id="zoombanner" onclick="HideZoomBanner()">
<p style="text-align: left;"> x Want to see the ABC editor and notation side-by-side? Zoom out: Windows: Ctrl - Mac: ⌘ -</p>
</div>
<div id="notenlinks" class="hidden-print">
<div id="topbar">
<font size="5" face="Comic Sans MS" id="toolpagetitle">ABC Transcription Tools Quick Editor</font>
<p>
<a href="userguide.html" target="_blank">User Guide</a> - <a href="tunesources.html" target="_blank" onclick="AddFromSearch(event,null);">Search for Tunes</a> - <a href="tunesources.html" target="_blank">Tune Sources</a> - <a href="https://michaeleskin.com/documents/abc_standard_v2.1.pdf" target="_blank">ABC Spec</a> - <a href="https://michaeleskin.com/documents/general_midi_extended_v7.pdf" target="_blank">MIDI</a> - <a href="https://michaeleskin.com/tunebooks.html" target="_blank">Tunebooks</a> - <a href="credits.html" target="_blank">Credits</a> - <a href="tipjars.html" target="_blank">Tip Jars</a>
</p>
</div>
<!-- name of abc file selected -->
<p id="abc-selected">No ABC file selected</p>
<div id="fileoperations">
<input type="file" style="margin-right:24px;" id="selectabcfile" accept=".abc,.txt,.ABC,.TXT,.xml,.XML,.musicxml,.mxl,.MXL,.mid,.MID,.midi,.MIDI,.bww,.BWW" hidden />
<!--our custom abc file upload button-->
<input class="abcupload btn btn-top" style="margin-right:24px;" title="Opens an existing ABC, MusicXML, BWW, or MIDI file. You may also drag-and-drop a single ABC, MusicXML, BWW, or MIDI file on the editor area to add it." onclick="fileOpenIntercept(event);" type="button" value="Open"/>
<input class="newabcfile btn btn-top" style="margin-right:24px;" id="newabcfile" onclick="AddABC();" type="button" value="Add" title="Add your own tunes, restore from a saved snapshot, seach for tunes, re-order tunes, delete tunes, or add examples tunes and song templates to the ABC"/>
<input class="saveabcfiledisabled btn btn-top" style="margin-right:24px;" id="saveabcfile" onclick="SaveABC();" type="button" value="Save" title="Saves the current ABC text to a file"/>
<input class="copybuttondisabled btn btn-top" style="margin-right:24px;" id="copybutton" onclick="CopyABC();" type="button" value="Copy All" title="Copies all of the ABC text to the clipboard"/>
<input class="rawmodebuttondisabled btn btn-rawmode-off" style="margin-right:24px;" id="rawmodebutton" onclick="ToggleRawMode()" type="button" value="Highlighting Off" title="When On, highlight notation by selecting the ABC text or highlight ABC text by clicking on the notation."/>
<input style="padding-left:20px;padding-right:20px" class="morecommands btn btn-top context-menu" id="morecommands" type="button" value="☰" title="Brings up a menu with additional useful commands"/>
</div>
<div id="inputarea">
<textarea id="abc" rows="12" cols="70" placeholder="Enter ABC or drag-and-drop an ABC, MusicXML, BWW, or MIDI file here" spellcheck="false" autocorrect="off" autocapitalize="off"></textarea>
</div>
</div>
<div id="diagnostics" class="diagnostics hidden-print">
</div>
<div id="playback-audio-inline" class="hidden-print" style="margin-top:15px;margin-bottom:2px">
</div>
<div id="notenrechts" class="hidden-print">
<div id="tabs-selection" class="toggle-buttons">
<input type="radio" id="b1" value="noten" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b1" class="btn btn-tab" title="Shows standard music notation" style="margin-right:16px;">Notation</label>
<input type="radio" id="b2" value="notenames" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b2" class="btn btn-tab" title="Shows note names tablature" style="margin-right:16px;">Names</label>
<input type="radio" id="b3" value="mandolin" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b3" class="btn btn-tab" title="Shows GDAE Mandolin tablature" style="margin-right:16px;">Mandolin</label>
<input type="radio" id="b4" value="gdad" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b4" class="btn btn-tab" id="b4label" title="Shows GDAD Bouzouki tablature" style="margin-right:16px;">GDAD</label>
<input type="radio" id="b5" value="cgdae" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b5" class="btn btn-tab" id="b5label" title="Shows CGDAE 5-string Fiddle tablature" style="margin-right:16px;">CGDAE</label>
<input type="radio" id="b6" value="guitare" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b6" class="btn btn-tab" title="Shows standard EADGBE Guitar tablature" style="margin-right:16px;">Guitar</label>
<input type="radio" id="b7" value="guitard" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b7" class="btn btn-tab" title="Shows DADGAD Guitar tablature" style="margin-right:16px;">DADGAD</label>
<input type="radio" id="b8" value="uke" name="notenodertab" class="hidebutton" onclick="ChangeTab()">
<label for="b8" class="btn btn-tab" title="Shows Ukulele tablature (G string used for notes lower than C)" style="margin-right:16px;">Uke</label>
<input type="radio" id="b9" value="whistle" name="notenodertab" class="hidebutton" onclick="ChangeTab()"/>
<label for="b9" class="btn btn-tab" title="Shows Tin Whistle (D) tablature" style="margin-right:0px;">Whistle</label>
</div>
<div id="transpose-controls">
<input class="transposedown btn btn-transpose" id="transposedown" onclick="TransposeDown(event)" type="button" value="Transpose Down" title="Transposes the selected tunes down one semitone. Shift-click transposes down one full step. Alt-click transposes down one octave."/>
<input class="transposeup btn btn-transpose" id="transposeup" onclick="TransposeUp(event)" type="button" value="Transpose Up" title="Transposes the selected tunes up one semitone. Shift-click transposes up one full step. Alt-click transposes up one octave."/>
<input class="snapshotbutton btn btn-snapshotbutton" id="snapshotbutton" onclick="SaveSnapshot(event);" type="button" value="Snapshot" title="Saves a Snapshot of the contents of the ABC editor to browser storage. Click for Snapshot #1, Shift-click for Snapshot #2, Alt-click for Snapshot #3, Shift-Alt-click for Snapshot #4."/>
<input class="restorebutton btn btn-restorebutton" id="restorebutton" onclick="RestoreSnapshot(event,false,false);" type="button" value="Restore" title="Replaces the contents of the ABC editor with a Snapshot saved in browser storage. Click for Snapshot #1, Shift-click for Snapshot #2, Alt-click for Snapshot #3, Shift-Alt-click for Snapshot #4."/>
<input class="toggleadvancedcontrols btn btn-toggleadvancedcontrols" id="toggleadvancedcontrols" onclick="AdvancedControlsDialog()" type="button" value="More Tools" title="Shows the More ABC Tools dialog where you can hide or strip chords and other ABC annotations, inject instrument tablature, as well as perform other ABC operations"/>
<input class="togglesharecontrols btn btn-togglesharecontrols" id="togglesharecontrols" onclick="SharingControlsDialog()" type="button" value="Sharing" title="Shows the Sharing dialog"/>
<input class="clearbutton btn btn-clearbutton" id="clearbutton" onclick="Clear()" type="button" value="Clear" title="Clears all the ABC"/>
</div>
</div>
</div>
<div id="notation-spacer" class="hidden-print relativebox"></div>
<div id="notation-placeholder" class="hidden-print relativebox">
<p id="notation-placeholder-text"><strong>Notation will appear here when you enter some ABC.</strong><br><br><br>Click <strong>Open</strong> to open an existing ABC, MusicXML, BWW, or MIDI file.<br><br>Click <strong>Add</strong> to add a new ABC tune or tune template.</p>
<p id="desktop_use_message"><strong>Drag-and-drop</strong> an ABC, MusicXML, BWW, or MIDI file on the editor area to add it.<br><br><br><strong>Resize the ABC Editor</strong> by clicking and dragging its lower right corner.</p>
<p id="notation-placeholder-text-2">Click <strong>Search for Tunes</strong> to find tunes by name.</p>
<input class="notation-placeholder-button btn btn-placeholder" onclick="showWelcomeScreen();" type="button" value="Show Intro Screen" title="Shows the intro screen"/>
</div>
<div id="notation-holder" class="notation-holder relativebox pagebreak">
</div>
</div>
<div id="offscreenrender" class="hidden-print">
</div>
<div id="offscreenrenderquickedit" style="position:absolute; left:-5000px;" class="hidden-print">
</div>
<div id="qrcode" class="hidden-print">
</div>
</body>
<script>
// Using the Quick Editor
var gIsQuickEditor = true;
</script>
<script type="text/javascript" src="jquery-1.11.1.min.js?v=2041"></script><!-- jQuery -->
<script type="text/javascript" src="jszip.min.js?v=2041"></script><!-- zip file handling -->
<script type="text/javascript" src="xml2abc-min.js?v=2041"></script><!-- to convert MusicXML to ABC -->
<script type="text/javascript" src="abcjs-chord-intervals.js?v=2041"></script><!-- chord intervals used by abcjs - non-minified -->
<script type="text/javascript" src="abcjs-basic-eskin-min.js?v=2041"></script><!-- to convert ABC to sheet music svg with tablature, transposition and audio playback options -->
<script type="text/javascript" src="jspdf.min.js?v=2041"></script><!-- to generate PDF using Javscript -->
<script type="text/javascript" src="pdf-lib-min.js?v=2041"></script><!-- PDF tools -->
<script type="text/javascript" src="html2image.js?v=2041"></script><!-- to convert HTML elements to bitmaps -->
<script type="text/javascript" src="qrcode.js?v=2041"></script><!-- to generate QR codes for the share links -->
<script type="text/javascript" src="lz-string.min.js?v=2041"></script><!-- used for share URL generation -->
<script type="text/javascript" src="daypilot-modal.min-3.10.1.js?v=2041"></script><!-- modal dialog replacement -->
<script type="text/javascript" src="lame.min.js?v=2041"></script><!-- .mp3 audio encoder -->
<script type="text/javascript" src="unmute.min.js?v=2041"></script><!-- fixes issue on iOS Safari muting tabs -->
<script type="text/javascript" src="tab-injectors-min.js?v=2041"></script><!-- Tab generation for ABC injection -->
<script type="text/javascript" src="visualscript-sdk.js?v=2041"></script><!-- SmartDraw VSON API -->
<script type="text/javascript" src="smartdraw-export-min.js?v=2041"></script><!-- Export to SmartDraw VSON -->
<script type="text/javascript" src="acoustic_grand_piano-mp3.js?v=2041"></script><!-- Offline grand piano sound -->
<script type="text/javascript" src="percussion-mp3.js?v=2041"></script><!-- Offline percussion -->
<script type="text/javascript" src="online-check.js?v=2041"></script><!-- check if online -->
<script type="text/javascript" src="database.js?v=2041"></script><!-- IndexedDB related features -->
<script type="text/javascript" src="download-reverb.js?v=2041"></script><!-- Downloading tune audio with reverb features -->
<script type="text/javascript" src="bww2abc.js?v=2041"></script><!-- Convert from BWW to abc -->
<script type="text/javascript" src="manage_database.js?v=2041"></script><!-- Sample database management tools -->
<script type="text/javascript" src="context-menu.js?v=2041"></script><!-- Dropdown context menus -->
<script type="text/javascript" src="app-min.js?v=2041"></script><!-- main application business logic -->
<script type="text/javascript" src="api-keys.js?v=2041"></script><!-- API keys used by the tool -->
</html>