70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!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>
|