https://eepymep.netlify.app/js/entry.js

1/*
2 * entry.js — Entry Overlay Handler
3 * ─────────────────────────────────
4 * Shows a splash screen on page load. When the user clicks "Enter",
5 * the overlay fades out and the music player auto-starts.
6 *
7 * This pattern is necessary because browsers block audio autoplay
8 * unless it's triggered by a user interaction (click, tap, etc).
9 */
10
11(function () {
12
13  const overlay = document.getElementById('entryOverlay');
14  const enterBtn = document.getElementById('enterBtn');
15  const playBtn = document.getElementById('player-play');
16
17  if (!overlay || !enterBtn || !playBtn) return;
18
19  // When user clicks "Enter"
20  enterBtn.addEventListener('click', () => {
21    // Fade out the overlay
22    overlay.classList.add('hidden');
23
24    // Get the audio element from the player
25    const audio = document.querySelector('audio') || window.audio;
26    
27    let playTriggered = false; // Flag to prevent double-triggering
28    
29    // If audio exists and has a source, wait for it to be ready
30    if (audio && audio.src) {
31      // Start loading the audio
32      audio.load();
33      
34      // Wait for audio to have enough data before playing
35      const tryPlay = () => {
36        if (playTriggered) return; // Already triggered, skip
37        
38        if (audio.readyState >= 2) {
39          // Audio is ready, play it
40          playTriggered = true;
41          playBtn.click();
42        } else {
43          // Not ready yet, wait for canplay event
44          const onCanPlay = () => {
45            if (playTriggered) return;
46            playTriggered = true;
47            playBtn.click();
48          };
49          
50          audio.addEventListener('canplay', onCanPlay, { once: true });
51          
52          // Fallback: try to play after 1.5 seconds even if not fully loaded
53          setTimeout(() => {
54            if (playTriggered) return; // Already playing
55            playTriggered = true;
56            audio.removeEventListener('canplay', onCanPlay);
57            playBtn.click();
58          }, 1500);
59        }
60      };
61      
62      // Give the fade animation time, then try to play
63      setTimeout(tryPlay, 400);
64    } else {
65      // No audio or no source, just trigger play button after delay
66      setTimeout(() => {
67        playBtn.click();
68      }, 400);
69    }
70
71    // Remove overlay from DOM after fade completes
72    setTimeout(() => {
73      overlay.remove();
74    }, 600);
75  });
76
77  // Optional: Allow Enter key to work too
78  document.addEventListener('keydown', (e) => {
79    if (e.key === 'Enter' && overlay && !overlay.classList.contains('hidden')) {
80      enterBtn.click();
81    }
82  });
83
84})();