diff --git a/index.html b/index.html
index f34c892..3697ec3 100644
--- a/index.html
+++ b/index.html
@@ -1450,8 +1450,8 @@
const reelContainerRight = document.getElementById('reelContainerRight');
// Tape size constants (in pixels)
- const TAPE_MIN_SIZE = 62; // Minimum tape size (just larger than reel-inner)
- const TAPE_MAX_SIZE = 166; // Maximum tape size (fills most of reel)
+ const TAPE_MIN_SIZE = 70; // Minimum tape size (just larger than reel-inner)
+ const TAPE_MAX_SIZE = 180; // Maximum tape size (fills most of reel)
// ========================================
// CONTINUOUS TAPE MODEL - STATE
@@ -2509,9 +2509,76 @@
// Auto-play next track when current ends
audio.addEventListener('ended', async () => {
- currentTrack = (currentTrack + 1) % playlist.length;
- await loadTrack(currentTrack);
- // Tape position continues naturally - don't reset
+ 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;
+ await loadTrack(currentTrack);
+ }
+
+ // Auto-play the next track
audio.play();
reelLeft.classList.add('spinning');
reelRight.classList.add('spinning');