Things wrong with my code: 1. The notes do not play when i press down the key on keyboard or the mouse. 2. The premade songs in the backend do not show up or play in the dropdown 3. The recordings do not go to the file when you save them. // Wait for the DOM to finish loading document.addEventListener("DOMContentLoaded", () => { // Create a new synthesizer object from Tone.js const synth = new Tone.Synth().toDestination(); // Define the mappings between keyboard keys and notes const keyNoteMappings = { "a": "C4", "w": "C#4", "s": "D4", "e": "D#4", "d": "E4", "f": "F4", "t": "F#4", "g": "G4", "y": "G#4", "h": "A4", "u": "Bb4", "j": "B4", "k": "C5", "o": "C#5", "l": "D5", "p": "D#5", ";": "E5" }; // Add event listeners to each keyboard key const keys = document.querySelectorAll(".keyboard button"); keys.forEach(key => { // When the key is pressed, play the corresponding note key.addEventListener("mousedown", () => { const note = keyNoteMappings[key.textContent.trim().toLowerCase()]; synth.triggerAttack(note); }); // When the key is released, stop playing the note key.addEventListener("mouseup", () => { const note = keyNoteMappings[key.textContent.trim().toLowerCase()]; synth.triggerRelease(note); }); }); // Get a reference to the tune dropdown, tune button, and recording buttons const tuneDropdown = document.querySelector("#tune-dropdown"); const tuneButton = document.querySelector("#tunebtn"); const recordButton = document.querySelector("#recordbtn"); const stopButton = document.querySelector("#stopbtn"); const saveButton = document.querySelector("#savebtn"); const tuneNameInput = document.querySelector("#tuneNameInput"); // Load the list of available tunes from the server and populate the dropdown axios.get("http://localhost:3000/api/v1/tunes/").then(response => { const tunes = response.data; tunes.forEach(tune => { const option = document.createElement("option"); option.value = tune.name; option.textContent = tune.name; tuneDropdown.appendChild(option); }); }).catch(error => { console.error("Failed to load tunes:", error); }); // Add a click event listener to the tune button tuneButton.addEventListener("click", () => { const selectedTune = tuneDropdown.value; if (!selectedTune) { alert("Please select a tune first."); return; } axios.get("http://localhost:3000/api/v1/tunes/${selectedTune}").then(response => { const tune = response.data; // Play each note in the tune with a slight delay between them tune.notes.forEach((note, index) => { setTimeout(() => { synth.triggerAttackRelease(note.note, note.duration); }, index * note.duration); }); }).catch(error => { console.error(`Failed to load tune "${selectedTune}":`, error); }); }); // Define variables for recording a new tune let recordedNotes = []; let recordingStartTime = null; // Define a function for starting a new recording function startRecording() { recordedNotes = []; recordingStartTime = Date.now(); recordButton.disabled = true; stopButton.disabled = false; } // Define a function for sto.

1. Things wrong with my code:
1. The notes do not play when i press down the key on keyboard or the mouse.
2. The premade songs in the backend do not show up or play in the dropdown
3. The recordings do not go to the file when you save them.
// Wait for the DOM to finish loading
document.addEventListener("DOMContentLoaded", () => {
// Create a new synthesizer object from Tone.js
const synth = new Tone.Synth().toDestination();
// Define the mappings between keyboard keys and notes
const keyNoteMappings = {
"a": "C4", "w": "C#4", "s": "D4", "e": "D#4", "d": "E4",
"f": "F4", "t": "F#4", "g": "G4", "y": "G#4", "h": "A4",
"u": "Bb4", "j": "B4", "k": "C5", "o": "C#5", "l": "D5",
"p": "D#5", ";": "E5"
};
// Add event listeners to each keyboard key
const keys = document.querySelectorAll(".keyboard button");
keys.forEach(key => {
// When the key is pressed, play the corresponding note
key.addEventListener("mousedown", () => {
const note = keyNoteMappings[key.textContent.trim().toLowerCase()];
synth.triggerAttack(note);
});

2. // When the key is released, stop playing the note
key.addEventListener("mouseup", () => {
const note = keyNoteMappings[key.textContent.trim().toLowerCase()];
synth.triggerRelease(note);
});
});
// Get a reference to the tune dropdown, tune button, and recording buttons
const tuneDropdown = document.querySelector("#tune-dropdown");
const tuneButton = document.querySelector("#tunebtn");
const recordButton = document.querySelector("#recordbtn");
const stopButton = document.querySelector("#stopbtn");
const saveButton = document.querySelector("#savebtn");
const tuneNameInput = document.querySelector("#tuneNameInput");
// Load the list of available tunes from the server and populate the dropdown
axios.get("http://localhost:3000/api/v1/tunes/").then(response => {
const tunes = response.data;
tunes.forEach(tune => {
const option = document.createElement("option");
option.value = tune.name;
option.textContent = tune.name;
tuneDropdown.appendChild(option);
});
}).catch(error => {

3. console.error("Failed to load tunes:", error);
});
// Add a click event listener to the tune button
tuneButton.addEventListener("click", () => {
const selectedTune = tuneDropdown.value;
if (!selectedTune) {
alert("Please select a tune first.");
return;
}
axios.get("http://localhost:3000/api/v1/tunes/${selectedTune}").then(response => {
const tune = response.data;
// Play each note in the tune with a slight delay between them
tune.notes.forEach((note, index) => {
setTimeout(() => {
synth.triggerAttackRelease(note.note, note.duration);
}, index * note.duration);
});
}).catch(error => {
console.error(`Failed to load tune "${selectedTune}":`, error);
});
});
// Define variables for recording a new tune
let recordedNotes = [];

4. let recordingStartTime = null;
// Define a function for starting a new recording
function startRecording() {
recordedNotes = [];
recordingStartTime = Date.now();
recordButton.disabled = true;
stopButton.disabled = false;
}
// Define a function for stopping a recording
function stopRecording() {
recordButton.disabled = false;
stopButton.disabled = true;
}
// Define a function for saving a recorded tune
function saveRecording() {
const tuneName = tuneNameInput.value;
if (!tuneName) {
alert("Please enter a name for the tune.");
return;
}
const tune = {
name: tuneName,
notes: recordedNotes

5. };
axios.post("http://localhost:3000/api/v1/tunes/", tune).then(response => {
const option = document.createElement("option");
option.value = tune.name;
option.textContent = tune.name;
tuneDropdown.appendChild(option);
tuneDropdown.value = tune.name;
tuneNameInput.value = "";
alert("Tune saved successfully!");
}).catch(error => {
console.error("Failed to save tune:", error);
});
}
// Add a click event listener to the record button
recordButton.addEventListener("click", () => {
startRecording();
}
);
// Add a click event listener to the stop button
stopButton.addEventListener("click", () => {
stopRecording();
}
);

6. // Add a click event listener to the save button
saveButton.addEventListener("click", () => {
saveRecording();
}
);
// Add event listeners to each keyboard key
keys.forEach(key => {
// When the key is pressed, play the corresponding note
key.addEventListener("mousedown", () => {
const note = keyNoteMappings[key.textContent.trim().toLowerCase()];
synth.triggerAttack(note);
if (recordingStartTime) {
const noteStartTime = Date.now() - recordingStartTime;
recordedNotes.push({
note: note,
startTime: noteStartTime
});
}
});
// When the key is released, stop playing the note
key.addEventListener("mouseup", () => {
const note = keyNoteMappings[key.textContent.trim().toLowerCase()];
synth.triggerRelease(note);

7. });
});
});
/html>