Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@momentollogy
momentollogy committed Apr 18, 2023
1 parent 6a69f78 commit 4e7d6f3
Showing 1 changed file with 87 additions and 98 deletions.
185 changes: 87 additions & 98 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@
background-color: #333;
}

input[type=range] {
width: 6.6%; /* Adjusts the slider width */
}

</style>
</head>
<body>
Expand All @@ -80,7 +84,7 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
<div class="key black" data-note="80" data-key="P">P</div>
<div class="key white" data-note="59">;</div>
<div class="key white" data-note="222">'</div>
<div class="key black" data-note="219" data-key="[">[</div>
<div class="key black" data-note="221" data-key="[">]</div>
<div class="key white" data-note="220">\</div>

</div>
Expand All @@ -89,7 +93,7 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>




<!-- RECORD and PLAYBACK BUTTONS -->
<input type="text" id="song-title" placeholder="Enter song title" value="int Untitled_Song_1" />
<button id="record">Record</button>
<button id="stop" disabled>Stop</button>
Expand All @@ -98,33 +102,34 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>


<!-- SLIDER BUTTON -->

<input type="range" min="0" max="2" step="1" value="0" id="slider" oninput="updateSliderValue(this.value)"
title=
"SLIDER FUNCTION
Left (Use for faster songs) = Notes Durations will max at 32nd notes.
Left = Shorts notes are 32nd notes.
Middle (Use for medium songs) = Notes Durations will max at 16th notes.
Middle = Shorts notes are 16th notes.
Right (Use for slower songs) = Notes Durations will max at 8th notes.
Right = Shortest notes are 8th notes.
(Rests; defined by “0” are not affected by the Slider)
"
>


<label for="metronome-bpm">Metronome BPM: </label>
<!-- METRONOME BUTTONS + post recording buttons -->
<label for="metronome-bpm">Metronome BPM: </label>
<input type="number" id="metronome-bpm" value="120" min="40" max="240" />
<button id="start-metronome">Start</button>
<button id="stop-metronome">Stop</button>

<div id="recording"></div>

<button id="copySongBtn" style="display: none;" onclick="copySongToClipboard(songString)">Copy Song</button>
<div id="recording"></div>
<button id="copySongBtn" style="display: none;" onclick="copySongToClipboard(songString)">Copy Song</button>

<br> <br> <br> <br>

<!-- LINKS -->
<div>
<a href="https://www.youtube.com/watch?v=-HBDiNoQkAw" target="_blank">Watch Tutorial</a>
</div>
Expand All @@ -142,8 +147,8 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
</p>

<!-- LOAD ARRAY TEXTAREA UI -->
<div style="position: absolute; right: 0px; top: 116px; padding-right: 300px;">
<textarea id="songInput" placeholder="Paste song array" style="width: 300px; height: 145px;
<div style="position: absolute; right: 0px; top: 116px; padding-right: 500px;">
<textarea id="songInput" placeholder="Paste song array" style="width: 288px; height: 145px;
overflow: auto; text-align: center;"></textarea>
<br>
<button id="loadSongButton" onclick="loadSongFromInput()">Load Song</button>
Expand All @@ -153,8 +158,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>





<script>


Expand Down Expand Up @@ -186,6 +189,7 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
222: 698.26, // ;
221: 739.99, // ]
220: 783.99, // \


};

Expand Down Expand Up @@ -267,7 +271,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>


let playingNotes = new Set();

let sliderValue = 0.5;

function updateSliderValue(value) {
Expand Down Expand Up @@ -304,18 +307,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
}


function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}


// Function to play a note
function playNote(frequency, keyElement, onStop) {
Expand Down Expand Up @@ -346,6 +337,40 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
return oscillator;
}


//event listner for mouse click on keys
const pianoKeys = document.querySelectorAll('.key');

pianoKeys.forEach(key => {
key.addEventListener('mousedown', () => {
const keyCode = key.dataset.note;
if (!playingNotes.has(keyCode)) {
playingNotes.add(keyCode);
playAndRecord(frequencies[keyCode], key);
}
});

key.addEventListener('mousemove', (event) => {
if (event.buttons === 1) { // Check if the left mouse button is pressed
const keyCode = key.dataset.note;
if (!playingNotes.has(keyCode)) {
playingNotes.add(keyCode);
playAndRecord(frequencies[keyCode], key);
}
}
});

key.addEventListener('mouseleave', () => {
const keyCode = key.dataset.note;
if (playingNotes.has(keyCode)) {
playingNotes.delete(keyCode);
key.dispatchEvent(new MouseEvent('mouseup'));
}
});
});



//Funtion to add a rest
function addRestIfNeeded() {
if (recordedNotes.length > 1) {
Expand All @@ -369,14 +394,12 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
document.getElementById('record').addEventListener('click', () => {
recording = true;
startTime = Date.now();
recordedNotes = []; // Clear the recordedNotes array before starting a new recording
recordingStartTime = null; // Reset the recordingStartTime
recordedNotes = [];
recordingStartTime = null;
document.getElementById('record').disabled = true;
document.getElementById('stop').disabled = false;

});


function stopPlayback() {
if (metronomeInterval) {
clearInterval(metronomeInterval);
Expand All @@ -385,34 +408,29 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
playing = false;
}


// Stop recording
document.getElementById('stop').addEventListener('click', () => {
recording = false;
startTime = null;
document.getElementById('record').disabled = false;
document.getElementById('stop').disabled = true;
displayRecording();
stopMetronome(); // Stop the metronome when stopping the recording

// Add these lines to stop playback when the "Stop" button is clicked and re-enable the "Play" button
stopMetronome();

if (!recording) {
stopPlayback();
document.getElementById('play').disabled = false;
}
});



//Clear button
// Clear button
document.getElementById('clear').addEventListener('click', () => {
recordedNotes = [];
document.getElementById("recording").innerHTML = "";
});


});

// PLAY EVENT LISTENER
// Play event listener
let isPlaying = false;

document.getElementById('play').addEventListener('click', async () => {
Expand All @@ -427,62 +445,46 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
});




//PLAY AND RECORD FUNCTIONs
// Play and record function
function playAndRecord(frequency, keyElement) {
if (!recordingNote) {
playNote(frequency, keyElement, duration => {
recordingNote = false;

if (recording) {
if (!recordingStartTime) {
recordingStartTime = new Date().getTime();
}
const restDuration = (new Date().getTime() - recordingStartTime) - duration;
if (restDuration > 0) {
recordedNotes.push({
rest: true,
duration: restDuration
});
console.log("Rest added:", { rest: true, duration: restDuration }); // Add this line
}
recordedNotes.push({
frequency: frequency,
duration: duration,
startTime: new Date().getTime() // Add this line
});
console.log("Note added:", { frequency: frequency, duration: duration, startTime: new Date().getTime() }); // Add this line
recordingStartTime = new Date().getTime();
}
if (!recordingNote) {
playNote(frequency, keyElement, duration => {
recordingNote = false;

if (recording) {
if (!recordingStartTime) {
recordingStartTime = new Date().getTime();
}
const restDuration = (new Date().getTime() - recordingStartTime) - duration;
if (restDuration > 0) {
recordedNotes.push({ rest: true, duration: restDuration });
}
recordedNotes.push({
frequency: frequency,
duration: duration,
startTime: new Date().getTime()
});
recordingStartTime = new Date().getTime();
}
});

recordingNote = true;
}
recordingNote = true;
}
}



//REST FUNCTION
// Rest function
function addRest() {
if (recording) {
const currentTime = new Date().getTime();
const restDuration = currentTime - recordingStartTime;
if (restDuration >= 100) { // Minimum rest duration, you can adjust this value
recordedNotes.push({
rest: true,
duration: restDuration,
});
if (restDuration >= 100) {
recordedNotes.push({ rest: true, duration: restDuration });
}
recordingStartTime = currentTime;
}
}


const keyCodes = {
"Semicolon": 59,
'Quote': 222, // "'"
};
const keyCodes = { "Semicolon": 59, 'Quote': 222 };

document.addEventListener('keydown', event => {
const keyCode = keyCodes[event.code] || event.keyCode;
Expand All @@ -505,11 +507,10 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
});


// FUNCTION DISPLAYRECORDING

// Display recording function
function displayRecording() {
let output = "";
let songArray = "";

const songTitle = document.getElementById("song-title").value;
const notesCount = recordedNotes.length;

Expand All @@ -524,7 +525,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
});

output += "};";
songArray = output;

const recordingElement = document.getElementById("recording");
recordingElement.innerHTML = `<button id="copy-song">Copy Song</button><pre>${output}</pre>`;
Expand All @@ -534,8 +534,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>
}




function getKeyCodeForFrequency(frequency) {
for (const [keyCode, freq] of Object.entries(frequencies)) {
if (freq === frequency) {
Expand Down Expand Up @@ -709,13 +707,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>










//QUANTIZE STUFF
function closestDuration(duration, supportedDurations) {
return supportedDurations.reduce((prev, curr) =>
Expand Down Expand Up @@ -831,8 +822,6 @@ <h1>Arduino Piano Buzzer Song Creator V1 <br> <small>by momentollogy</small><br>





</script>
</body>
</html>

0 comments on commit 4e7d6f3

Please sign in to comment.