<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black p-10">
<section id="interactiveInterface" class="grid grid-cols-5 grid-rows-5 gap-4 rounded-t-xl overflow-hidden p-10">
</section>
<div id="keyContainer"></div>
<div id="bpmSlider"></div>
<div id="playContainer"></div>
<div id="downloadContainer"></div>
<script src="https://unpkg.com/tone"></script>
<script src="https://unpkg.com/midi-writer-js@latest"></script>
<script>
class ChordInterface {
constructor() {
this.loop = new Tone.Loop(this.callback.bind(this), "4m").start(0);
this.polySynth = new Tone.PolySynth().toDestination();
this.key = "C";
this.keys = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
this.loopLength = "4m";
this.loopLengths = ["1m", "2m", "4m", "8m", "16m"];
this.circleOfFifths = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
Tone.Transport.start();
this.createAllKeyButtons();
this.createLoopLengthDropdown();
this.createDownloadButton();
this.createPlayButton();
}
createAllKeyButtons() {
const keyContainer = document.querySelector('#keyContainer');
keyContainer.innerHTML = '';
this.keys.forEach(key => {
keyContainer.innerHTML += `
<button value="${key}" class="flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center">
${key}
</button>
`;
});
keyContainer.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', (e) => this.handleKeyChange(e));
});
}
createLoopLengthDropdown() {
const bpmSlider = document.querySelector('#bpmSlider');
bpmSlider.innerHTML = '';
const select = document.createElement('select');
select.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
this.loopLengths.forEach(loop => {
select.innerHTML += `<option value=${loop}>${loop}</option>`;
})
select.addEventListener('change', (e) => this.handleLoopLengthChange(e));
bpmSlider.appendChild(select);
}
createPlayButton() {
const playContainer = document.querySelector('#playContainer');
playContainer.innerHTML = '';
const button = document.createElement('button');
button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
button.textContent = 'Play/Pause';
button.addEventListener("click", () => {
this.handlePlayButtonClick();
});
playContainer.appendChild(button);
}
createDownloadButton() {
const downloadContainer = document.querySelector('#downloadContainer');
downloadContainer.innerHTML = '';
const button = document.createElement('button');
button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
button.textContent = 'Download MIDI';
button.addEventListener("click", () => {
this.handleDownloadButtonClick();
});
downloadContainer.appendChild(button);
}
}
window.onload = function() {
new ChordInterface();
};
</script>
</body>
</html>