cottongin/cassette-player
cottongin/cassette-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

tweak reel sizes, fix end-of-tape procedure

Browse Source
This commit is contained in:
cottongin 2026-01-17 17:36:51 -05:00
parent 62eba51514
commit ce98b75c54
No known key found for this signature in database
GPG Key ID: 0ECC91FE4655C262
1 changed files with 72 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
index.html
View File

@ -1450,8 +1450,8 @@
const reelContainerRight = document.getElementById('reelContainerRight'); const reelContainerRight = document.getElementById('reelContainerRight');
// Tape size constants (in pixels) // Tape size constants (in pixels)
const TAPE_MIN_SIZE = 62; // Minimum tape size (just larger than reel-inner) const TAPE_MIN_SIZE = 70; // Minimum tape size (just larger than reel-inner)
const TAPE_MAX_SIZE = 166; // Maximum tape size (fills most of reel) const TAPE_MAX_SIZE = 180; // Maximum tape size (fills most of reel)
// ======================================== // ========================================
// CONTINUOUS TAPE MODEL - STATE // CONTINUOUS TAPE MODEL - STATE
@ -2509,9 +2509,76 @@
// Auto-play next track when current ends // Auto-play next track when current ends
audio.addEventListener('ended', async () => { audio.addEventListener('ended', async () => {
const wasLastTrack = currentTrack === playlist.length - 1;
// End of tape - rewind to beginning with sound, then continue playing
if (wasLastTrack) {
if (durationsLoaded) {
// Animate rewind to beginning with sound
const animationDuration = 500;
const startProgress = getTapeProgress();
const endProgress = 0;
// Start rewind sound and animation
SoundEffects.startTapeWindLoop();
reelLeft.style.animationDuration = '0.3s';
reelRight.style.animationDuration = '0.3s';
tapeLeft.style.animationDuration = '0.3s';
tapeRight.style.animationDuration = '0.3s';
reelLeft.classList.add('spinning');
reelRight.classList.add('spinning');
tapeLeft.classList.add('spinning');
tapeRight.classList.add('spinning');
// Animate tape sizes
const startTime = performance.now();
await new Promise(resolve => {
function animate(time) {
const elapsed = time - startTime;
const t = Math.min(elapsed / animationDuration, 1);
const easedT = easeInOutQuad(t);
const currentProgress = startProgress + (endProgress - startProgress) * easedT;
setTapeSizesAtProgress(currentProgress);
if (t < 1) {
requestAnimationFrame(animate);
} else {
resolve();
}
}
requestAnimationFrame(animate);
});
// Stop sound and reset animation speed
SoundEffects.stopTapeWindLoop();
reelLeft.style.animationDuration = '';
reelRight.style.animationDuration = '';
tapeLeft.style.animationDuration = '';
tapeRight.style.animationDuration = '';
}
// Load track 0
currentTrack = 0;
trackNameInner.textContent = playlist[0].name;
audio.src = playlist[0].url;
await new Promise(resolve => {
audio.addEventListener('loadedmetadata', function onMeta() {
audio.removeEventListener('loadedmetadata', onMeta);
resolve();
});
audio.load();
});
audio.currentTime = 0;
resetTapeSizes();
} else {
// Normal track transition - advance to next track
currentTrack = (currentTrack + 1) % playlist.length; currentTrack = (currentTrack + 1) % playlist.length;
await loadTrack(currentTrack); await loadTrack(currentTrack);
// Tape position continues naturally - don't reset }
// Auto-play the next track
audio.play(); audio.play();
reelLeft.classList.add('spinning'); reelLeft.classList.add('spinning');
reelRight.classList.add('spinning'); reelRight.classList.add('spinning');