Upload folder using huggingface_hub

index.html

@@ -25,6 +25,7 @@
       --glass-border: rgba(148, 163, 184, 0.2);
       --success-color: #10b981;
       --error-color: #ef4444;
+      --warning-color: #f59e0b;
     }
 
     body {
@@ -62,7 +63,6 @@
       0% {
         transform: rotate(0deg);
       }
-
       100% {
         transform: rotate(360deg);
       }
@@ -107,12 +107,9 @@
     }
 
     @keyframes pulse {
-
-      0%,
-      100% {
+      0%, 100% {
         transform: scale(1);
       }
-
       50% {
         transform: scale(1.1);
       }
@@ -155,37 +152,31 @@
     }
 
     @keyframes glow-green {
-
-      0%,
-      100% {
+      0%, 100% {
         box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
       }
-
       50% {
         box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
       }
     }
 
     @keyframes blink {
-
-      0%,
-      100% {
+      0%, 100% {
         opacity: 1;
       }
-
       50% {
         opacity: 0.5;
       }
     }
 
-    /* Main Container - Single Column */
+    /* Main Container */
     .container {
       max-width: 800px;
       margin: 2rem auto;
       padding: 0 2rem;
     }
 
-    /* Player Section - Full Width */
+    /* Player Section */
     .player-section {
       background: var(--glass-bg);
       backdrop-filter: blur(10px);
@@ -232,19 +223,15 @@
       0% {
         transform: rotate(0deg);
       }
-
       100% {
         transform: rotate(360deg);
       }
     }
 
     @keyframes float {
-
-      0%,
-      100% {
+      0%, 100% {
         transform: translateY(0);
       }
-
       50% {
         transform: translateY(-10px);
       }
@@ -323,45 +310,14 @@
       transform-origin: bottom;
     }
 
-    .bar:nth-child(1) {
-      animation-delay: 0s;
-      height: 25px;
-    }
-
-    .bar:nth-child(2) {
-      animation-delay: 0.1s;
-      height: 35px;
-    }
-
-    .bar:nth-child(3) {
-      animation-delay: 0.2s;
-      height: 30px;
-    }
-
-    .bar:nth-child(4) {
-      animation-delay: 0.3s;
-      height: 40px;
-    }
-
-    .bar:nth-child(5) {
-      animation-delay: 0.4s;
-      height: 25px;
-    }
-
-    .bar:nth-child(6) {
-      animation-delay: 0.5s;
-      height: 35px;
-    }
-
-    .bar:nth-child(7) {
-      animation-delay: 0.6s;
-      height: 30px;
-    }
-
-    .bar:nth-child(8) {
-      animation-delay: 0.7s;
-      height: 40px;
-    }
+    .bar:nth-child(1) { animation-delay: 0s; height: 25px; }
+    .bar:nth-child(2) { animation-delay: 0.1s; height: 35px; }
+    .bar:nth-child(3) { animation-delay: 0.2s; height: 30px; }
+    .bar:nth-child(4) { animation-delay: 0.3s; height: 40px; }
+    .bar:nth-child(5) { animation-delay: 0.4s; height: 25px; }
+    .bar:nth-child(6) { animation-delay: 0.5s; height: 35px; }
+    .bar:nth-child(7) { animation-delay: 0.6s; height: 30px; }
+    .bar:nth-child(8) { animation-delay: 0.7s; height: 40px; }
 
     .visualizer.paused .bar {
       animation-play-state: paused;
@@ -369,12 +325,9 @@
     }
 
     @keyframes wave {
-
-      0%,
-      100% {
+      0%, 100% {
         transform: scaleY(1);
       }
-
       50% {
         transform: scaleY(1.5);
       }
@@ -492,7 +445,7 @@
       box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
     }
 
-    /* Station Selector (Compact) */
+    /* Station Selector */
     .station-selector {
       background: var(--glass-bg);
       border: 1px solid var(--glass-border);
@@ -559,11 +512,33 @@
       animation: blink 1s infinite;
     }
 
+    .status-indicator.warning {
+      background: var(--warning-color);
+      animation: blink 2s infinite;
+    }
+
     .bitrate {
       color: var(--secondary-color);
       font-weight: 600;
     }
 
+    /* Retry Button */
+    .retry-btn {
+      background: var(--secondary-color);
+      color: white;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: all 0.3s;
+    }
+
+    .retry-btn:hover {
+      background: var(--accent-color);
+      transform: scale(1.05);
+    }
+
     /* Toast Notification */
     .toast {
       position: fixed;
@@ -600,10 +575,53 @@
       color: var(--error-color);
     }
 
+    .toast.warning i {
+      color: var(--warning-color);
+    }
+
     .toast.info i {
       color: var(--secondary-color);
     }
 
+    /* Error Panel */
+    .error-panel {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid var(--error-color);
+      border-radius: 15px;
+      padding: 1.5rem;
+      margin-top: 1rem;
+      display: none;
+      animation: slideIn 0.3s ease-out;
+    }
+
+    .error-panel.show {
+      display: block;
+    }
+
+    .error-panel h3 {
+      color: var(--error-color);
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .error-panel p {
+      color: var(--text-secondary);
+      margin-bottom: 1rem;
+    }
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
     /* Hidden Stations Section */
     .stations-section {
       display: none;
@@ -739,9 +757,20 @@
         <div class="status-text">
           <span class="status-indicator" id="statusIndicator"></span>
           <span id="statusText">Bereit</span>
+          <button class="retry-btn" id="retryBtn" style="display: none;">
+            <i class="fas fa-redo"></i> Erneut versuchen
+          </button>
         </div>
         <div class="bitrate" id="bitrate">128 kbps</div>
       </div>
+
+      <div class="error-panel" id="errorPanel">
+        <h3><i class="fas fa-exclamation-triangle"></i> Stream-Verbindungsfehler</h3>
+        <p id="errorMessage">Der Stream konnte nicht geladen werden. Dies kann an Netzwerkproblemen oder daran liegen, dass der Stream derzeit nicht verfügbar ist.</p>
+        <button class="retry-btn" onclick="retryCurrentStation()">
+          <i class="fas fa-redo"></i> Nochmal versuchen
+        </button>
+      </div>
     </section>
 
     <section class="stations-section">
@@ -758,7 +787,7 @@
   <audio id="audioPlayer" crossorigin="anonymous"></audio>
 
   <script>
-    // German Radio Stations with real streaming URLs
+    // Updated German Radio Stations with working streaming URLs and fallbacks
     const radioStations = [
       {
         id: 1,
@@ -766,7 +795,11 @@
         genre: "Pop",
         category: "pop",
         icon: "fa-broadcast-tower",
-        url: "https://mp3channels.webradio.antenne.de/antenne-bayern",
+        urls: [
+          "https://mp3channels.webradio.antenne.de/antenne-bayern",
+          "https://mp3channels.webradio.antenne.de/antenne-bayern-mp3",
+          "https://stream.antenne.de/antenne-bayern/live/mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -775,7 +808,10 @@
         genre: "Pop & Rock",
         category: "pop",
         icon: "fa-music",
-        url: "https://br-br3-live.cast.addradio.de/br/br3/live/mp3/128/stream.mp3",
+        urls: [
+          "https://br-br3-live.cast.addradio.de/br/br3/live/mp3/128/stream.mp3",
+          "https://br-br3-live.cast.addradio.de/br/br3/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -784,7 +820,10 @@
         genre: "Nachrichten & Info",
         category: "news",
         icon: "fa-newspaper",
-        url: "https://st01.dlf.de/dlf/01/128/mp3/stream.mp3",
+        urls: [
+          "https://st01.dlf.de/dlf/01/128/mp3/stream.mp3",
+          "https://st02.dlf.de/dlf/02/128/mp3/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -793,7 +832,10 @@
         genre: "Pop",
         category: "pop",
         icon: "fa-radio",
-        url: "https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3",
+        urls: [
+          "https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3",
+          "https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -802,7 +844,10 @@
         genre: "Pop & News",
         category: "pop",
         icon: "fa-microphone",
-        url: "https://wdr-wdr2-live.icecast.wdr.de/wdr/wdr2/live/mp3/128/stream.mp3",
+        urls: [
+          "https://wdr-wdr2-live.icecast.wdr.de/wdr/wdr2/live/mp3/128/stream.mp3",
+          "https://wdr-wdr2-live.icecast.wdr.de/wdr/wdr2/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -811,7 +856,10 @@
         genre: "Pop",
         category: "pop",
         icon: "fa-headphones",
-        url: "https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3",
+        urls: [
+          "https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3",
+          "https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -820,7 +868,10 @@
         genre: "Pop & Rock",
         category: "rock",
         icon: "fa-guitar",
-        url: "https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3",
+        urls: [
+          "https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3",
+          "https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -829,7 +880,10 @@
         genre: "Pop & Rock",
         category: "rock",
         icon: "fa-compact-disc",
-        url: "https://mdr-mdr-jump-sachsen.cast.addradio.de/mdr/mdr-jump/sachsen/mp3/128/stream.mp3",
+        urls: [
+          "https://mdr-mdr-jump-sachsen.cast.addradio.de/mdr/mdr-jump/sachsen/mp3/128/stream.mp3",
+          "https://mdr-mdr-jump-sachsen.cast.addradio.de/mdr/mdr-jump/sachsen/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -838,7 +892,10 @@
         genre: "Pop",
         category: "pop",
         icon: "fa-broadcast-tower",
-        url: "https://rbb-88-8-live.cast.addradio.de/rbb/rbb888/live/mp3/128/stream.mp3",
+        urls: [
+          "https://rbb-88-8-live.cast.addradio.de/rbb/rbb888/live/mp3/128/stream.mp3",
+          "https://rbb-88-8-live.cast.addradio.de/rbb/rbb888/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -847,7 +904,10 @@
         genre: "Klassik",
         category: "classic",
         icon: "fa-violin",
-        url: "https://br-brklassik-live.cast.addradio.de/br/brklassik/live/mp3/128/stream.mp3",
+        urls: [
+          "https://br-brklassik-live.cast.addradio.de/br/brklassik/live/mp3/128/stream.mp3",
+          "https://br-brklassik-live.cast.addradio.de/br/brklassik/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -856,7 +916,10 @@
         genre: "Pop & Electro",
         category: "pop",
         icon: "fa-bolt",
-        url: "https://swr-dasding-live.cast.addradio.de/swr/dasding/live/mp3/128/stream.mp3",
+        urls: [
+          "https://swr-dasding-live.cast.addradio.de/swr/dasding/live/mp3/128/stream.mp3",
+          "https://swr-dasding-live.cast.addradio.de/swr/dasding/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -865,7 +928,10 @@
         genre: "Pop & Electro",
         category: "pop",
         icon: "fa-star",
-        url: "https://hr-youfm-live.cast.addradio.de/hr/youfm/live/mp3/128/stream.mp3",
+        urls: [
+          "https://hr-youfm-live.cast.addradio.de/hr/youfm/live/mp3/128/stream.mp3",
+          "https://hr-youfm-live.cast.addradio.de/hr/youfm/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -874,7 +940,10 @@
         genre: "Pop & Electro",
         category: "pop",
         icon: "fa-broadcast-tower",
-        url: "https://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3",
+        urls: [
+          "https://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3",
+          "https://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -883,7 +952,10 @@
         genre: "Pop & Electro",
         category: "pop",
         icon: "fa-headphones",
-        url: "https://ndr-n-joy-niedersachsen.cast.addradio.de/ndr/njoy/niedersachsen/mp3/128/stream.mp3",
+        urls: [
+          "https://ndr-n-joy-niedersachsen.cast.addradio.de/ndr/njoy/niedersachsen/mp3/128/stream.mp3",
+          "https://ndr-n-joy-niedersachsen.cast.addradio.de/ndr/njoy/niedersachsen/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       },
       {
@@ -892,7 +964,10 @@
         genre: "Nachrichten",
         category: "news",
         icon: "fa-newspaper",
-        url: "https://br-br24-live.cast.addradio.de/br/br24/live/mp3/128/stream.mp3",
+        urls: [
+          "https://br-br24-live.cast.addradio.de/br/br24/live/mp3/128/stream.mp3",
+          "https://br-br24-live.cast.addradio.de/br/br24/live/mp3/64/stream.mp3"
+        ],
         bitrate: "128"
       }
     ];
@@ -901,6 +976,9 @@
     let isPlaying = false;
     let currentStationIndex = -1;
     let audioPlayer;
+    let currentUrlIndex = 0;
+    let retryCount = 0;
+    const maxRetries = 3;
 
     // DOM Elements
     const playBtn = document.getElementById('playBtn');
@@ -919,11 +997,15 @@
     const statusIndicator = document.getElementById('statusIndicator');
     const statusText = document.getElementById('statusText');
     const bitrate = document.getElementById('bitrate');
+    const retryBtn = document.getElementById('retryBtn');
+    const errorPanel = document.getElementById('errorPanel');
+    const errorMessage = document.getElementById('errorMessage');
 
     // Initialize
     function init() {
       audioPlayer = document.getElementById('audioPlayer');
       audioPlayer.volume = 0.7;
+      audioPlayer.preload = 'none';
       
       populateStationSelect();
       setupEventListeners();
@@ -941,17 +1023,19 @@
       });
     }
 
-    // Setup audio event listeners
+    // Setup audio event listeners with enhanced error handling
     function setupAudioEventListeners() {
       audioPlayer.addEventListener('loadstart', () => {
         loadingSpinner.classList.add('active');
         updateStatus('Laden...', 'loading');
-        showToast('Verbindung wird hergestellt...', 'info');
+        hideErrorPanel();
       });
 
       audioPlayer.addEventListener('canplay', () => {
         loadingSpinner.classList.remove('active');
         updateStatus('Verbunden', 'connected');
+        retryCount = 0;
+        currentUrlIndex = 0;
         showToast('Stream erfolgreich geladen!', 'success');
       });
 
@@ -980,10 +1064,22 @@
       });
 
       audioPlayer.addEventListener('error', (e) => {
-        loadingSpinner.classList.remove('active');
-        updateStatus('Fehler', 'error');
-        showToast('Fehler beim Laden des Streams', 'error');
-        console.error('Audio error:', e);
+        handleAudioError(e);
+      });
+
+      // Network status detection
+      audioPlayer.addEventListener('stalled', () => {
+        if (isPlaying) {
+          updateStatus('Verbindung unterbrochen', 'warning');
+          showToast('Verbindung unterbrochen, versuche erneut...', 'warning');
+        }
+      });
+
+      audioPlayer.addEventListener('waiting', () => {
+        if (isPlaying) {
+          loadingSpinner.classList.add('active');
+          updateStatus('Puffern...', 'loading');
+        }
       });
 
       // Simulate track info updates
@@ -991,148 +1087,29 @@
         if (isPlaying && currentStation) {
           updateTrackInfo();
         }
-      }, 30000); // Update every 30 seconds
-    }
-
-    // Update track info (simulation)
-    function updateTrackInfo() {
-      if (!currentStation) return;
-      
-      const trackTitle = document.querySelector('.track-title');
-      const trackArtist = document.querySelector('.track-artist');
-      
-      // Simulate changing track info
-      const titles = [
-        'Aktueller Titel',
-        'Live von der Station',
-        'Musikprogramm läuft',
-        'Unterhaltung pur'
-      ];
-      
-      const randomTitle = titles[Math.floor(Math.random() * titles.length)];
-      trackTitle.textContent = randomTitle;
-      trackArtist.textContent = `via ${currentStation.name}`;
-    }
-
-    // Update status
-    function updateStatus(text, state) {
-      statusText.textContent = text;
-      statusIndicator.className = 'status-indicator';
-      
-      switch(state) {
-        case 'connected':
-          statusIndicator.classList.add('connected');
-          break;
-        case 'error':
-          statusIndicator.classList.add('error');
-          break;
-        default:
-          break;
-      }
+      }, 30000);
     }
 
-    // Select station from dropdown
-    function selectStationFromDropdown() {
-      const stationId = parseInt(stationSelect.value);
-      if (!stationId) return;
+    // Handle audio errors with fallback mechanism
+    function handleAudioError(error) {
+      loadingSpinner.classList.remove('active');
       
-      const stationIndex = radioStations.findIndex(s => s.id === stationId);
-      if (stationIndex !== -1) {
-        selectStation(stationIndex);
-      }
-    }
-
-    // Select station
-    function selectStation(index) {
-      if (index < 0 || index >= radioStations.length) return;
-      
-      currentStationIndex = index;
-      currentStation = radioStations[index];
-      
-      // Update UI
-      stationName.textContent = currentStation.name;
-      stationLogo.innerHTML = `<i class="fas ${currentStation.icon}"></i>`;
-      bitrate.textContent = `${currentStation.bitrate} kbps`;
-      
-      // Update dropdown
-      stationSelect.value = currentStation.id;
-      
-      // Update track info
-      document.querySelector('.track-title').textContent = 'Lade...';
-      document.querySelector('.track-artist').textContent = '';
-      
-      // Load and play
-      audioPlayer.src = currentStation.url;
-      audioPlayer.play();
+      console.error('Audio error:', error);
       
-      showToast(`Station gewechselt: ${currentStation.name}`, 'info');
-    }
-
-    // Setup event listeners
-    function setupEventListeners() {
-      playBtn.addEventListener('click', togglePlay);
-      prevBtn.addEventListener('click', playPrevious);
-      nextBtn.addEventListener('click', playNext);
-      
-      stationSelect.addEventListener('change', selectStationFromDropdown);
-      
-      volumeSlider.addEventListener('input', (e) => {
-        const volume = e.target.value / 100;
-        audioPlayer.volume = volume;
-        volumeValue.textContent = `${e.target.value}%`;
-      });
-    }
-
-    // Toggle play/pause
-    function togglePlay() {
-      if (!currentStation) {
-        showToast('Bitte wähle zuerst eine Station aus', 'info');
-        return;
-      }
-
-      if (isPlaying) {
-        audioPlayer.pause();
-      } else {
+      if (currentStation && currentUrlIndex < currentStation.urls.length - 1) {
+        // Try next URL
+        currentUrlIndex++;
+        console.log(`Trying fallback URL ${currentUrlIndex + 1}/${currentStation.urls.length}`);
+        audioPlayer.src = currentStation.urls[currentUrlIndex];
         audioPlayer.play();
-      }
-    }
-
-    // Play previous station
-    function playPrevious() {
-      if (currentStationIndex <= 0) {
-        selectStation(radioStations.length - 1);
-      } else {
-        selectStation(currentStationIndex - 1);
-      }
-    }
-
-    // Play next station
-    function playNext() {
-      if (currentStationIndex >= radioStations.length - 1) {
-        selectStation(0);
-      } else {
-        selectStation(currentStationIndex + 1);
-      }
-    }
-
-    // Show toast notification
-    function showToast(message, type = 'info') {
-      toastMessage.textContent = message;
-      toast.className = `toast ${type} show`;
-      
-      // Update icon based on type
-      const icon = toast.querySelector('i');
-      icon.className = type === 'success' ? 'fas fa-check-circle' :
-                      type === 'error' ? 'fas fa-exclamation-circle' :
-                      'fas fa-info-circle';
-      
-      setTimeout(() => {
-        toast.classList.remove('show');
-      }, 3000);
-    }
-
-    // Initialize the app
-    init();
-  </script>
-</body>
-</html>
+        showToast(`Versuche alternative Stream-URL...`, 'info');
+      } else if (retryCount < maxRetries) {
+        // Retry with same URL
+        retryCount++;
+        currentUrlIndex = 0;
+        setTimeout(() => {
+          console.log(`Retry attempt ${retryCount}/${maxRetries}`);
+          audioPlayer.src = currentStation.urls[0];
+          audioPlayer.play();
+          showToast(`Versuch ${retryCount}/${maxRetries}...`, 'warning');
+        }, 2000 *