-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (132 loc) · 5.04 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
<!--
Chord Transposer
https://github.com/barrettj12/chord-transposer
Author: Jordan Barrett (@barrettj12)
https://github.com/barrettj12
Main HTML file for web app
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page info -->
<title>Chord Transposer</title>
<meta name="author" content="Jordan Barrett">
<meta name="description" content="Put your chords in a different key.">
<meta name="keywords" content="transpose, chord, music">
<!-- Stylesheets -->
<link href="https://unpkg.com/[email protected]/base.css" rel="stylesheet">
<link rel="stylesheet" href="./css/custom.css">
<base target="_blank">
<!-- JavaScript imports -->
<script type="module" src="./js/Main.js"></script>
</head>
<body>
<header>
<h1>Chord Transposer</h1>
</header>
<main>
<div id="panel">
<div class="col">
<textarea
id="input"
class="inline"
placeholder="Type your chords here..."
rows=12
cols=36
></textarea>
<button id="reset">Reset</button>
</div>
<div class="col">
<textarea
id="output"
placeholder="...and the transposed chords will appear here."
rows=12
cols=36
readonly
></textarea>
<span id="semitone-controls">
<p>Transpose by:</p>
<button id="minus">−</button>
<input id="semitones" value=0 readonly>
<button id="plus">+</button>
</span>
</div>
</div>
<hr>
<section id="about">
<p>This simple tool transposes your chords, melodies or note sequences into another key. Unlike many other transposers, it obeys the laws of music theory by choosing the correct <a href="https://en.wikipedia.org/wiki/Enharmonic">enharmonic</a> (e.g. using Bb instead of A# in the key of F major).</p>
<p>It can deal with modified chords (e.g. m7, add2), slash chords, and formatting data such as titles, colons, dashes, brackets, etc. Click <a id="exlink" href="" target="_self">here</a> for an example.</p>
<p><b>Note:</b> you can write annotations such as "verse:", "chorus:", song titles and lyrics, but it is suggested you write these <b>all in lowercase,</b> so they are not confused for chords.</p>
</section>
<!-- Textarea script -->
<script type="module">
// Import JS backend
import { transpose } from "./js/Main.js";
// Get interactive elements on the page
let input = document.getElementById("input");
let output = document.getElementById("output");
let reset = document.getElementById("reset");
let plus = document.getElementById("plus");
let minus = document.getElementById("minus");
let semitones = document.getElementById("semitones");
let exlink = document.getElementById("exlink");
// Add event listeners
input.addEventListener("input", processChords);
reset.addEventListener("click", resetAll);
plus.addEventListener("click", tuneUp);
minus.addEventListener("click", tuneDown);
exlink.onclick = example;
// Updates the textarea
function processChords() {
output.value = transpose(input.value, parseInt(semitones.value));
}
function resetAll() {
input.value = "";
output.value = "";
semitones.value = "0";
}
function tuneUp() {
semitones.value = (parseInt(semitones.value) + 1).toString();
processChords();
}
function tuneDown() {
semitones.value = (parseInt(semitones.value) - 1).toString();
processChords();
}
function example() {
input.value =
/* "stevie wonder - isn't she lovely\n"
+ "\n"
+ "C#m9 - C#m6/9 - A/B - E (x2)\n"
+ "\n"
+ "Amaj9 - G#aug7 - C#m9 - C#m6/9\n"
+ "A/B - A/B - E - E - (G#7)"; */
"elton john - bennie and the jets\n"
+ "\n"
+ "riff (staccato): Gmaj7 - Fmaj7\n"
+ "\n"
+ "verse:\n"
+ "Am7 D7\n"
+ "hey kids, shake it loose together\n"
+ " Gmaj7\n"
+ "the spotlight's hitting something\n"
+ " G#o7\n"
+ "that's been known to change the weather\n"
+ "...";
semitones.value = "-3";
processChords();
return false;
}
</script>
</main>
<hr>
<footer>
<!-- <hr> -->
<p>© Jordan Barrett, 2021.</p>
<p>Found a bug, problem or issue? Let me know <a href="https://github.com/barrettj12/chord-transposer/issues/new">here</a>.</p>
<p>This project is open source - contribute <a href="https://github.com/barrettj12/chord-transposer">here</a>!</p>
</footer>
</body>
</html>