-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
69 lines (58 loc) · 2.5 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
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>不囉唆的和弦代號查詢器 by NiceChord 好和弦</title>
<script src="tonal.min.js"></script>
<script src="abcjs-basic-min.js"></script>
<style>
input[type="text"] {
font-size: 20px; /* increases font size */
padding: 5px; /* adds space around the text */
width: 300px; /* set a specific width */
}
#chordOutput {
font-size: 20px;
padding: 5px;
}
</style>
</head>
<body>
<h3>不囉唆的和弦代號查詢器 by <a href="https://nicechord.com">NiceChord 好和弦</a></h3>
<div>
<input type="text" id="inputField" oninput="updateChord(this.value)" placeholder="輸入和弦代號">
</div>
<div id="chordOutput"></div>
<div id="paper"></div>
<script>
function updateChord(value) {
const valueCleaned = value.replace(/[(),\s]/g, "");
const result = Tonal.Chord.get(valueCleaned);
const resultWithOctave = Tonal.Chord.getChord(result.aliases[0], result.tonic+"4");
if (result.notes.join(' ') != "") {
const notes = result.notes.join(' ');
document.getElementById('chordOutput').textContent = result.symbol + " 和弦的組成音是 " + notes; let abcNoteArray = resultWithOctave.notes.map(item => {
// Replace '#' with '^' and 'b' with '_'
let replaced = item.replace(/#/g, '^').replace(/b/g, '_');
// Check if item contains '5' or '6', if so, convert to lowercase
if (replaced.includes('5') || replaced.includes('6')) {
replaced = replaced.toLowerCase();
}
// Move the first character to the end
let rearranged = replaced.substring(1) + replaced.charAt(0);
// Check if item contains '6', if so, add a "'" at the end
if (rearranged.includes('6')) {
rearranged = rearranged + "'";
}
// Remove all numbers
rearranged = rearranged.replace(/\d/g, '');
return rearranged;
});
const abcSyntax = "[" + abcNoteArray.join('8') + "8]"
ABCJS.renderAbc("paper", `X:1\nK:C\n${abcSyntax}`);
}
}
</script>
</body>
</html>