Programmiererforum

Code: Select all

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);< /code>
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;
}< /code>







console.log(Tonal.Key.minorKey("Ab"));






Original Key:

C
D
E
F
G
A
B




C
D
E
F
G
A
B


D             G             A              D
Fly me to the moon, let me play among the stars