I have 7 buttons, C D E F G A B , a textarea and an Original Key.
If I copy the lyrics “Fly me to the moon” into the textarea with its chords and press the E button once, it will go up a tone normally.
However, if I press the same button again, it will go up another tone.
What is wrong with the value, can someone explain to me?
Thank you in advance
const { transpose, Interval } = Tonal;
// Function to transpose chords in the text
function transposeChords(text, interval) {
return text.replace(/b([A-G][#b]?)(m|min|maj|dim|dim7|aug|sus|add)?([0-9]*)b/g, (match, root, type, number) => {
let chordType = type;
// Handle extended chords
if (number) {
chordType = chordType || '';
if (number.match(/d+/)) {
chordType += number;
}
}
try {
const transposedRoot = transpose(root, interval);
const transposedChord = transposedRoot + (chordType || '');
return transposedChord || match;
} catch (e) {
console.error('Error transposing chord', match, e);
return match;
}
});
}
// Function to handle transpose button click
window.transpose = function(padd) {
let interval = Interval.distance(window.originalKey, padd);
let lyrics = document.getElementById("textarea").value;
document.getElementById('textarea').value = transposeChords(lyrics, interval);
colorPads(padd);
};
// Highlighted 17 Pads
function colorPads(padd) {
const buttons = document.querySelectorAll('.pads');
buttons.forEach(button => {
if (button.dataset.padd === padd) {
button.classList.add('blue');
} else {
button.classList.remove('blue');
}
});
}
// Save original key when selected from dropdown
function originalKey_function() {
const select_OrigKey = document.getElementById('originalKey_id');
window.originalKey = select_OrigKey.value;
colorPads(window.originalKey);
}
// Event listener for pads (17 buttons)
document.querySelectorAll('.pads').forEach(button => {
button.addEventListener('click', () => {
const padd = button.dataset.padd;
window.transpose(padd);
});
});
// Event listener for original key dropdown
document.getElementById('originalKey_id').addEventListener('change', originalKey_function);
// Initial setup
window.originalKey = 'C'; // Default original key
colorPads(window.originalKey);body {
font-family: Arial, sans-serif;
background-color: #333;
color: #ddd;
text-align: center;
}
.pads_container {
position:relative;
top:2vmin;
display:flex;
width:95%;
left:1vmin;
right:1vmin;
}
button.pads {
padding: 1em;
font-size: 3vmin;
border: 1px solid #ccc;
background: green;
color: #fff;
cursor: pointer;
}
button.pads.blue {
background-color: #007bff;
color: #fff;
}
button.pads:hover {
background-color: #00a3d9;
}
#textarea {
top:3em;
position:relative;
width:100%;
background: #222;
color: #ddd;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/tonal/browser/tonal.min.js"></script>
<script>
console.log(Tonal.Key.minorKey("Ab"));
</script>
</head>
<body>
<!-- Original Key -->
<div>
<label for="originalKey_id">Original Key:</label>
<select id="originalKey_id">
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<!-- 17 buttons -->
<div class="pads_container">
<button class="pads" data-padd="C">C</button>
<button class="pads" data-padd="D">D</button>
<button class="pads" data-padd="E">E</button>
<button class="pads" data-padd="F">F</button>
<button class="pads" data-padd="G">G</button>
<button class="pads" data-padd="A">A</button>
<button class="pads" data-padd="B">B</button>
</div>
<textarea value="" id="textarea" rows="5" cols="25">
D G A D
Fly me to the moon, let me play among the stars
</textarea>
</div>
</body>
</html>