-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (140 loc) · 14.4 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
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Music Editor</title>
<link rel="stylesheet" href="res/app.css">
<link rel="stylesheet" href="res/inputbox.css">
<link rel="stylesheet" href="res/keyboard.css">
<link rel="stylesheet" href="res/lib/font.css">
<link rel="stylesheet" href="res/lib/abcjs-midi.css">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/manifest.json">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<script>
if (navigator.serviceWorker && !(navigator.mozApps && navigator.mozApps.installPackage)) {
navigator.serviceWorker.register('sw.js');
}
</script>
<script src="res/lib/scroll.js" defer></script>
<script src="res/fixKeyboard.js" defer></script>
<script src="res/file.js" defer></script>
<script src="res/inputbox.js" defer></script>
<script src="res/keyboard.js" defer></script>
<script src="res/lib/abc.js" defer></script>
<script src="res/app.js" defer></script>
</head><body class="lang-en">
<div id="left">
<section id="keyboard">
<input>
<button data-exec="keyboard">⌨</button>
<button data-exec="del">⌫</button>
<button data-exec="start">⇤</button>
<button data-exec="left">←</button>
<button data-exec="up">↑</button>
<button data-exec="down">↓</button>
<button data-exec="right">→</button>
<button data-exec="end">⇥</button>
<div class="more-lines">
<button>(</button><button>)</button><button>[</button><button>]</button><button>z</button><button>^</button><button>_</button><button>=</button>
<button>C</button><button>D</button><button>E</button><button>F</button><button>G</button><button>A</button><button>B</button><button>,</button>
<button>c</button><button>d</button><button>e</button><button>f</button><button>g</button><button>a</button><button>b</button><button>'</button>
<button>/</button><button>2</button><button>4</button><button>8</button><button>16</button><button>3</button><button><</button><button>></button>
<button data-str=" ">␣</button><button data-str=" ">⏎</button><button>-</button><button>|</button><button>:</button><button>\</button><button>"</button><button>%</button>
</div>
</section>
<section id="input"><div id="input-box"></div></section>
</div>
<div id="right">
<section id="sheet">
<div id="warnings"></div>
<div id="canvas"></div>
</section>
<section id="export">
<div id="midi-container"></div>
<div id="midi-download" style="display: none;"></div>
<button id="button-fresh-abc" class="wide"><span class="lang" lang="en">Empty ABC file</span><span class="lang" lang="de">Leere ABC-Datei</span></button>
<button id="button-import-abc" class="wide"><span class="lang" lang="en">Open ABC file</span><span class="lang" lang="de">ABC-Datei öffnen</span></button>
<button id="button-export-abc" class="wide"><span class="lang" lang="en">Save ABC file</span><span class="lang" lang="de">ABC-Datei speichern</span></button>
<button id="button-export-png" class="wide"><span class="lang" lang="en">Export as PNG</span><span class="lang" lang="de">Als PNG exportieren</span></button>
<button id="button-export-svg" class="wide"><span class="lang" lang="en">Export as SVG</span><span class="lang" lang="de">Als SVG exportieren</span></button>
<button id="button-export-midi" class="wide"><span class="lang" lang="en">Export as MIDI</span><span class="lang" lang="de">Als MIDI exportieren</span></button>
</section>
</div>
<div id="help">
<div class="lang" lang="en">
<h1>Quick reference on the ABC syntax</h1>
<p>Notes are entered as <code>CDEFGAB</code>. Use <code>cdefgab</code> for the next octave, and <code>,</code> or <code>'</code> after a note for even lower or higher octaves. Rests are denoted by <code>z</code>.</p>
<p>Accidentals are given by <code>^</code> for a sharp, <code>_</code> for flat, and <code>=</code> for natural. These symbols precede the note. Use the <code>K:</code> header for the overall key.</p>
<p>The note length is denoted by a number after the note itself, it is based on the standard length given in the <code>L:</code> header. For shorter notes, use <code>/2</code> (or just <code>/</code>) etc. For dotted notes use <code>3</code> as the length, or <code>3/2</code> etc. Alternatively, you can put a <code><</code> or <code>></code> between two notes to make one dotted and the other halved.</p>
<p>A triplet is denoted as <code>(3CDE</code>, you can also use similar notations for duplets, quadruplets, etc.</p>
<p>You can enter bar lines by <code>|</code>, end bars by <code>|]</code>, and repetitions by <code>|:</code> and <code>:|</code>. For parts that differ the first and second time, prepend <code>[1</code> resp. <code>[2</code>. The meter is given in the <code>M:</code> header field.</p>
<p>For ties, put a <code>-</code> between the notes, for slures put the notes in <code>()</code>. To have separate beams, put a space between two notes. Otherwise, spaces just increase legibility, and can be put in most places. For chords, use <code>[]</code> around the notes. For chord symbols, enclose them in quotes (<code>"</code>) and prepend them to the note.</p>
<p>Bars will be broken at the same places as the lines, but you can end a line with <code>\</code> to suppress a break. Use <code>%</code> for comments, especially to temporarily comment out parts while you concentrate on others.</p>
<p>At the very beginning some headers with metadata appear. Note that the <code>X:</code> header (an index number, you can ignore it unless you want to edit two or more tunes at once, which isn’t well supported) should come first, and the <code>K:</code> header last. Many headers can be changed inside the tune, to do so, you have to put the new header in square brackets.</p>
<p>Apart from the header fields mentioned above, there is also the <code>T:</code> header (directly after the <code>X:</code> header), which you can use to add a title. For the composer, use <code>C:</code>.</p>
<p>To get a different clef, you can put something like <code>clef=bass</code> behind the key in the <code>K:</code> header. Alternatively, you can use the <code>V:</code> header, e.g. <code>V:voice1 clef=bass</code>. You can use more than one <code>V:</code> header (with different IDs) for more than one voice in the same system, precede the line of notes with <code>[V:voice1]</code> etc. to indicate which voice they belong to.</p>
<p>An important header for playing the music is <code>Q:</code> to specify the tempo. If you’re playing the music too fast, it might fall out of the rhythm, this can even happen with the default tempo. In such a case you should add this header and define a slower tempo. With <code>Q:1/4=120</code>, for example, you get 120 quaters per minute.</p>
<p>For more information about the ABC format, please see <a href="http://abcnotation.com/wiki/abc:standard:v2.1" target="_blank" rel="noopener">the official documentation</a> or any other documentation you can find.</p>
<p>A quick reference for the most important keys (<code>K:</code> header field):</p>
<table>
<tr><td></td><th>major</th><th>minor</th></tr>
<tr><th>7b</th><td><code>Cb</code></td><td><code>Abm</code></td></tr>
<tr><th>6b</th><td><code>Gb</code></td><td><code>Ebm</code></td></tr>
<tr><th>5b</th><td><code>Db</code></td><td><code>Bbm</code></td></tr>
<tr><th>4b</th><td><code>Ab</code></td><td><code>Fm</code></td></tr>
<tr><th>3b</th><td><code>Eb</code></td><td><code>Cm</code></td></tr>
<tr><th>2b</th><td><code>Bb</code></td><td><code>Gm</code></td></tr>
<tr><th>1b</th><td><code>F</code></td><td><code>Dm</code></td></tr>
<tr><th>0</th><td><code>C</code></td><td><code>Am</code></td></tr>
<tr><th>1#</th><td><code>G</code></td><td><code>Em</code></td></tr>
<tr><th>2#</th><td><code>D</code></td><td><code>Bm</code></td></tr>
<tr><th>3#</th><td><code>A</code></td><td><code>F#m</code></td></tr>
<tr><th>4#</th><td><code>E</code></td><td><code>C#m</code></td></tr>
<tr><th>5#</th><td><code>B</code></td><td><code>G#m</code></td></tr>
<tr><th>6#</th><td><code>F#</code></td><td><code>D#m</code></td></tr>
<tr><th>7#</th><td><code>C#</code></td><td><code>A#m</code></td></tr>
</table>
<p>This app is free software, you can get the source from <a href="https://github.com/Schnark/music-editor" target="_blank" rel="noopener">GitHub</a>. It uses several libraries, most notably <a href="https://github.com/paulrosen/abcjs" target="_blank" rel="noopener">abcjs</a> and <a href="https://github.com/gleitz/midi-js-soundfonts" target="_blank" rel="noopener">MIDI.js Soundfonts</a>.</p>
</div>
<div class="lang" lang="de">
<h1>Kurzübersicht zur ABC-Syntax</h1>
<p>Noten werden als <code>CDEFGAB</code> eingegeben. <strong>Achtung:</strong> Das deutsche H wird als <code>B</code> notiert! Nutze <code>cdefgab</code> für die nächste Oktave und <code>,</code> oder <code>'</code> nach einer Note für noch tiefere oder höhere Oktaven. Pausen werden als <code>z</code> notiert.</p>
<p>Vorzeichen werden angegeben mit <code>^</code> für ein Kreuz, <code>_</code> für b und <code>=</code> für ein Auflösungszeichen. Diese Symbole gehen der Note voraus. Nutze die <code>K:</code>-Kopfzeile für die Tonart.</p>
<p>Die Notenlänge wird durch eine Zahl hinter der Note angegeben, sie basiert auf der Standardlänge, die in der <code>L:</code>-Kopfzeile festgelegt wurde. Nutze <code>/2</code> (oder nur <code>/</code>) für kürzere Noten, etc. Für punktierte Noten nimmst du <code>3</code> als Länge oder <code>3/2</code> etc. Alternativ kannst du <code><</code> oder <code>></code> zwischen zwei Noten setzen um die eine zu punktieren und die andere zu halbieren.</p>
<p>Triolen werden als <code>(3CDE</code> notiert, eine analoge Syntax gibt es für Duolen, Quartolen etc.</p>
<p>Taktstriche kannst du als <code>|</code> einfügen, Endstriche mit <code>|]</code> und Wiederholungszeichen als <code>|:</code> und <code>:|</code>. Teile, die sich beim ersten und zweiten Mal unterscheiden, leitest du mit <code>[1</code> bzw. <code>[2</code> ein. Die Taktangabe steht in der <code>M:</code>-Kopfzeile.</p>
<p>Für einen Bindebogen fügst du <code>-</code> zwischen den Noten ein, für einen Phrasierungsbogen umschließt du sie mit <code>()</code>. Um getrennte Fähnchen zu erhalten fügst du ein Leerzeichen zwischen den Noten ein, ansonsten dienen Leerzeichen nur der Lesbarkeit und können an den meisten Stellen eingefügt werden. Akkorde werden mit <code>[]</code> um die Noten erzeugt. Gitarrengriffe werden in Anführungszeichen (<code>"</code>) eingschlossen und der Note vorangestellt.</p>
<p>Die Notenzeilen werden dort umbrochen, wo auch die Zeilenumbrüche sind, aber du kannst eine Zeile mit <code>\</code> beenden um den Umbruch zu unterdrücken. Verwende <code>%</code> für Kommentare, besonders um temporär Teile auszukommentieren, während du dich auf andere konzentrierst.</p>
<p>Ganz am Anfang stehen einige Kopfzeilen mit Metadaten. Beachte, dass die <code>X:</code>-Kopfzeile (eine Indexnummer, die du ignorieren kannst, sofern du nicht zwei oder mehr Melodien in einer Datei haben möchtest, was aber nicht vollständig unterstützt wird) als erste kommen sollte, während die <code>K:</code>-Kopfzeile den Abschluss bildet. Viele Kopfzeilen können auch innerhalb der Melodie geändert werden, dazu musst du sie in eckige Klammern einschließen.</p>
<p>Neben den oben erwähnten Kopfzeilen gibt es noch die <code>T:</code>-Kopfzeile (direkt nach der <code>X:</code>-Kopfzeile), die den Titel nennt. Nutze <code>C:</code> für den Komponisten.</p>
<p>Für einen anderen Notenschlüssel kannst du hinter der Tonart in der <code>K:</code>-Kopfzeile etwa <code>clef=bass</code> angeben. Alternativ kannst du die <code>V:</code>-Kopfzeile verwenden, beispielsweise <code>V:voice1 clef=bass</code>. Mit mehr als einer <code>V:</code>-Kopfzeile (mit verschiedenen IDs) kannst du mehrere Stimmen in einem System notieren, stelle dazu allen Notenzeilen ein <code>[V:voice1]</code> etc. voran um anzugeben, zu welcher Stimme sie gehören.</p>
<p>Eine wichtige Kopfzeile zum Spielen der Musik ist <code>Q:</code> mit der Angabe des Tempos. Wenn du die Musik zu schnell abspielen lässt, dann kann sie aus dem Takt geraten, dies kann auch bei den Standardeinstellungen passieren. In solch einem Fall solltest du diese Kopfzeile hinzufügen und ein langsameres Tempo definieren. Mit <code>Q:1/4=120</code> erhältst du beispielsweise 120 Viertelnoten pro Minute.</p>
<p>Weitere Informationen über das ABC-Format gibt es in der <a href="http://abcnotation.com/wiki/abc:standard:v2.1" target="_blank" rel="noopener">offiziellen Dokumentation</a> (englisch) oder jeder anderen Dokumentation, die du finden kannst.</p>
<p>Eine kurze Übersicht für die wichtigsten Tonarten (<code>K:</code>-Kopfzeile):</p>
<table>
<tr><td></td><th>Dur</th><th>Moll</th></tr>
<tr><th>7b</th><td><code>Cb</code></td><td><code>Abm</code></td></tr>
<tr><th>6b</th><td><code>Gb</code></td><td><code>Ebm</code></td></tr>
<tr><th>5b</th><td><code>Db</code></td><td><code>Bbm</code></td></tr>
<tr><th>4b</th><td><code>Ab</code></td><td><code>Fm</code></td></tr>
<tr><th>3b</th><td><code>Eb</code></td><td><code>Cm</code></td></tr>
<tr><th>2b</th><td><code>Bb</code></td><td><code>Gm</code></td></tr>
<tr><th>1b</th><td><code>F</code></td><td><code>Dm</code></td></tr>
<tr><th>0</th><td><code>C</code></td><td><code>Am</code></td></tr>
<tr><th>1#</th><td><code>G</code></td><td><code>Em</code></td></tr>
<tr><th>2#</th><td><code>D</code></td><td><code>Bm</code></td></tr>
<tr><th>3#</th><td><code>A</code></td><td><code>F#m</code></td></tr>
<tr><th>4#</th><td><code>E</code></td><td><code>C#m</code></td></tr>
<tr><th>5#</th><td><code>B</code></td><td><code>G#m</code></td></tr>
<tr><th>6#</th><td><code>F#</code></td><td><code>D#m</code></td></tr>
<tr><th>7#</th><td><code>C#</code></td><td><code>A#m</code></td></tr>
</table>
<p>Diese App ist freie Software, du kannst den Quelltext auf <a href="https://github.com/Schnark/music-editor" target="_blank" rel="noopener">GitHub</a> herunterladen. Sie nutzt verschiedene Bibliotheken, insbesondere <a href="https://github.com/paulrosen/abcjs" target="_blank" rel="noopener">abcjs</a> und <a href="https://github.com/gleitz/midi-js-soundfonts" target="_blank" rel="noopener">MIDI.js Soundfonts</a>.</p>
</div></div>
</body></html>