Spaces:

Multimedix
/

anycoder-872e5823

Running

App Files Files Community

Multimedix commited on Dec 26, 2025

Commit

2fd63b8

verified ·

1 Parent(s): ae5d08a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +908 -19

index.html CHANGED Viewed

@@ -1,19 +1,908 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Deutsche Radio Stream - Live Radio aus Deutschland</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-color: #1e3a8a;
+            --secondary-color: #3b82f6;
+            --accent-color: #f59e0b;
+            --dark-bg: #0f172a;
+            --light-bg: #1e293b;
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --glass-bg: rgba(30, 41, 59, 0.5);
+            --glass-border: rgba(148, 163, 184, 0.2);
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            min-height: 100vh;
+            color: var(--text-primary);
+            overflow-x: hidden;
+        }
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+            overflow: hidden;
+        }
+        .bg-animation::before {
+            content: '';
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            top: -50%;
+            left: -50%;
+            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
+            animation: rotate 30s linear infinite;
+        }
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Header */
+        header {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--glass-border);
+            padding: 1.5rem 2rem;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .header-content {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        .logo i {
+            font-size: 2rem;
+            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: pulse 2s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+        .attribution {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+        .attribution a {
+            color: var(--secondary-color);
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .attribution a:hover {
+            color: var(--accent-color);
+        }
+        /* Main Container */
+        .container {
+            max-width: 1400px;
+            margin: 2rem auto;
+            padding: 0 2rem;
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 2rem;
+        }
+        /* Player Section */
+        .player-section {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 2rem;
+        }
+        .now-playing {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .station-logo {
+            width: 120px;
+            height: 120px;
+            margin: 0 auto 1.5rem;
+            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: white;
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .station-name {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(135deg, var(--text-primary), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .current-track {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            margin-bottom: 1rem;
+            min-height: 30px;
+        }
+        .visualizer {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
+            margin-bottom: 2rem;
+        }
+        .bar {
+            width: 4px;
+            background: linear-gradient(to top, var(--secondary-color), var(--accent-color));
+            border-radius: 2px;
+            animation: wave 1s ease-in-out infinite;
+        }
+        .bar:nth-child(1) { animation-delay: 0s; height: 20px; }
+        .bar:nth-child(2) { animation-delay: 0.1s; height: 30px; }
+        .bar:nth-child(3) { animation-delay: 0.2s; height: 25px; }
+        .bar:nth-child(4) { animation-delay: 0.3s; height: 35px; }
+        .bar:nth-child(5) { animation-delay: 0.4s; height: 20px; }
+        .bar:nth-child(6) { animation-delay: 0.5s; height: 30px; }
+        .bar:nth-child(7) { animation-delay: 0.6s; height: 25px; }
+        .bar:nth-child(8) { animation-delay: 0.7s; height: 35px; }
+        .visualizer.paused .bar {
+            animation-play-state: paused;
+            opacity: 0.5;
+        }
+        @keyframes wave {
+            0%, 100% { transform: scaleY(1); }
+            50% { transform: scaleY(1.5); }
+        }
+        /* Player Controls */
+        .player-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .control-btn {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            color: var(--text-primary);
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 1.2rem;
+        }
+        .control-btn:hover {
+            background: var(--secondary-color);
+            transform: scale(1.1);
+            box-shadow: 0 5px 20px rgba(59, 130, 246, 0.4);
+        }
+        .play-btn {
+            width: 70px;
+            height: 70px;
+            font-size: 1.5rem;
+            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+            border: none;
+        }
+        .play-btn:hover {
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
+        }
+        /* Volume Control */
+        .volume-control {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            background: var(--glass-bg);
+            padding: 1rem;
+            border-radius: 15px;
+            border: 1px solid var(--glass-border);
+        }
+        .volume-slider {
+            flex: 1;
+            -webkit-appearance: none;
+            appearance: none;
+            height: 6px;
+            background: var(--light-bg);
+            border-radius: 3px;
+            outline: none;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            background: var(--secondary-color);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .volume-slider::-webkit-slider-thumb:hover {
+            background: var(--accent-color);
+            transform: scale(1.2);
+        }
+        /* Stations List */
+        .stations-section {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 1.5rem;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        .stations-section::-webkit-scrollbar {
+            width: 8px;
+        }
+        .stations-section::-webkit-scrollbar-track {
+            background: var(--light-bg);
+            border-radius: 4px;
+        }
+        .stations-section::-webkit-scrollbar-thumb {
+            background: var(--secondary-color);
+            border-radius: 4px;
+        }
+        .section-title {
+            font-size: 1.5rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .station-item {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            margin-bottom: 0.75rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .station-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-color: var(--secondary-color);
+            transform: translateX(5px);
+        }
+        .station-item.active {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(245, 158, 11, 0.2));
+            border-color: var(--accent-color);
+        }
+        .station-icon {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+        }
+        .station-info {
+            flex: 1;
+        }
+        .station-title {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+        }
+        .station-genre {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+        .station-live {
+            width: 8px;
+            height: 8px;
+            background: #ef4444;
+            border-radius: 50%;
+            animation: blink 2s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        /* Categories */
+        .categories {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+        }
+        .category-btn {
+            padding: 0.5rem 1rem;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.875rem;
+        }
+        .category-btn:hover {
+            background: var(--secondary-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+        .category-btn.active {
+            background: var(--secondary-color);
+            color: white;
+        }
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+            .stations-section {
+                max-height: 400px;
+            }
+        }
+        @media (max-width: 640px) {
+            header {
+                padding: 1rem;
+            }
+            .header-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .container {
+                padding: 0 1rem;
+                margin: 1rem auto;
+            }
+            .player-section, .stations-section {
+                padding: 1.5rem;
+            }
+            .station-name {
+                font-size: 1.5rem;
+            }
+            .play-btn {
+                width: 60px;
+                height: 60px;
+                font-size: 1.2rem;
+            }
+            .control-btn {
+                width: 40px;
+                height: 40px;
+                font-size: 1rem;
+            }
+        }
+        /* Loading Animation */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid var(--glass-border);
+            border-radius: 50%;
+            border-top-color: var(--secondary-color);
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: var(--light-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 10px;
+            padding: 1rem 2rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            opacity: 0;
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+        .toast.show {
+            transform: translateX(-50%) translateY(0);
+            opacity: 1;
+        }
+        .toast i {
+            font-size: 1.5rem;
+            color: var(--accent-color);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-animation"></div>
+    <header>
+        <div class="header-content">
+            <div class="logo">
+                <i class="fas fa-radio"></i>
+                <span>Deutsche Radio Stream</span>
+            </div>
+            <div class="attribution">
+                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+            </div>
+        </div>
+    </header>
+    <main class="container">
+        <section class="player-section">
+            <div class="now-playing">
+                <div class="station-logo" id="stationLogo">
+                    <i class="fas fa-broadcast-tower"></i>
+                </div>
+                <h2 class="station-name" id="stationName">Wähle eine Station</h2>
+                <p class="current-track" id="currentTrack">---</p>
+                <div class="visualizer paused" id="visualizer">
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                </div>
+            </div>
+            <div class="player-controls">
+                <button class="control-btn" id="prevBtn">
+                    <i class="fas fa-backward"></i>
+                </button>
+                <button class="control-btn play-btn" id="playBtn">
+                    <i class="fas fa-play"></i>
+                </button>
+                <button class="control-btn" id="nextBtn">
+                    <i class="fas fa-forward"></i>
+                </button>
+            </div>
+            <div class="volume-control">
+                <i class="fas fa-volume-down"></i>
+                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
+                <i class="fas fa-volume-up"></i>
+                <span id="volumeValue">70%</span>
+            </div>
+        </section>
+        <section class="stations-section">
+            <h3 class="section-title">
+                <i class="fas fa-list"></i>
+                Radio Stationen
+            </h3>
+            <div class="categories">
+                <button class="category-btn active" data-category="all">Alle</button>
+                <button class="category-btn" data-category="pop">Pop</button>
+                <button class="category-btn" data-category="rock">Rock</button>
+                <button class="category-btn" data-category="news">Nachrichten</button>
+                <button class="category-btn" data-category="classic">Klassik</button>
+            </div>
+            <div class="stations-list" id="stationsList">
+                <!-- Stations will be populated by JavaScript -->
+            </div>
+        </section>
+    </main>
+    <div class="toast" id="toast">
+        <i class="fas fa-check-circle"></i>
+        <span id="toastMessage">Nachricht</span>
+    </div>
+    <audio id="audioPlayer" crossorigin="anonymous"></audio>
+    <script>
+        // German Radio Stations
+        const radioStations = [
+            {
+                id: 1,
+                name: "ANTENNE BAYERN",
+                genre: "Pop",
+                category: "pop",
+                url: "https://mp3channels.webradio.antenne.de/antenne-bayern",
+                icon: "fa-broadcast-tower"
+            },
+            {
+                id: 2,
+                name: "BAYERN 3",
+                genre: "Pop & Rock",
+                category: "pop",
+                url: "https://br-br3-live.cast.addradio.de/br/br3/live/mp3/128/stream.mp3",
+                icon: "fa-music"
+            },
+            {
+                id: 3,
+                name: "DEUTSCHLANDFUNK",
+                genre: "Nachrichten & Info",
+                category: "news",
+                url: "https://st01.dlf.de/dlf/01/128/mp3/stream.mp3",
+                icon: "fa-newspaper"
+            },
+            {
+                id: 4,
+                name: "HR3",
+                genre: "Pop",
+                category: "pop",
+                url: "https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3",
+                icon: "fa-radio"
+            },
+            {
+                id: 5,
+                name: "WDR 2",
+                genre: "Pop & News",
+                category: "pop",
+                url: "https://wdr-wdr2-rheinland.icecast.wdr.de/wdr/wdr2/rheinland/mp3/128/stream.mp3",
+                icon: "fa-microphone"
+            },
+            {
+                id: 6,
+                name: "SWR3",
+                genre: "Pop",
+                category: "pop",
+                url: "https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3",
+                icon: "fa-headphones"
+            },
+            {
+                id: 7,
+                name: "NDR 2",
+                genre: "Pop & Rock",
+                category: "rock",
+                url: "https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3",
+                icon: "fa-guitar"
+            },
+            {
+                id: 8,
+                name: "MDR JUMP",
+                genre: "Pop & Rock",
+                category: "rock",
+                url: "https://mdr-mdr-jump-live.cast.addradio.de/mdr/mdr-jump/live/mp3/128/stream.mp3",
+                icon: "fa-compact-disc"
+            },
+            {
+                id: 9,
+                name: "RBB 88.8",
+                genre: "Pop",
+                category: "pop",
+                url: "https://rbb-88-8-live.cast.addradio.de/rbb/rbb888/live/mp3/128/stream.mp3",
+                icon: "fa-broadcast-tower"
+            },
+            {
+                id: 10,
+                name: "BR-KLASSIK",
+                genre: "Klassik",
+                category: "classic",
+                url: "https://br-br-klassik-live.cast.addradio.de/br/br-klassik/live/mp3/128/stream.mp3",
+                icon: "fa-violin"
+            },
+            {
+                id: 11,
+                name: "DASDING",
+                genre: "Pop & Electro",
+                category: "pop",
+                url: "https://swr-dasding-live.cast.addradio.de/swr/dasding/live/mp3/128/stream.mp3",
+                icon: "fa-bolt"
+            },
+            {
+                id: 12,
+                name: "YOU FM",
+                genre: "Pop & Electro",
+                category: "pop",
+                url: "https://hr-youfm-live.cast.addradio.de/hr/youfm/live/mp3/128/stream.mp3",
+                icon: "fa-star"
+            }
+        ];
+        let currentStation = null;
+        let isPlaying = false;
+        let currentStationIndex = -1;
+        let filteredStations = [...radioStations];
+        // DOM Elements
+        const audioPlayer = document.getElementById('audioPlayer');
+        const playBtn = document.getElementById('playBtn');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const volumeSlider = document.getElementById('volumeSlider');
+        const volumeValue = document.getElementById('volumeValue');
+        const stationName = document.getElementById('stationName');
+        const currentTrack = document.getElementById('currentTrack');
+        const stationLogo = document.getElementById('stationLogo');
+        const visualizer = document.getElementById('visualizer');
+        const stationsList = document.getElementById('stationsList');
+        const toast = document.getElementById('toast');
+        const toastMessage = document.getElementById('toastMessage');
+        // Initialize
+        function init() {
+            renderStations();
+            setupEventListeners();
+            audioPlayer.volume = 0.7;
+        }
+        // Render stations list
+        function renderStations() {
+            stationsList.innerHTML = '';
+            filteredStations.forEach((station, index) => {
+                const stationElement = document.createElement('div');
+                stationElement.className = 'station-item';
+                stationElement.dataset.stationId = station.id;
+                const actualIndex = radioStations.findIndex(s => s.id === station.id);
+                stationElement.innerHTML = `
+                    <div class="station-icon">
+                        <i class="fas ${station.icon}"></i>
+                    </div>
+                    <div class="station-info">
+                        <div class="station-title">${station.name}</div>
+                        <div class="station-genre">${station.genre}</div>
+                    </div>
+                    <div class="station-live"></div>
+                `;
+                stationElement.addEventListener('click', () => selectStation(actualIndex));
+                stationsList.appendChild(stationElement);
+            });
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            playBtn.addEventListener('click', togglePlay);
+            prevBtn.addEventListener('click', playPrevious);
+            nextBtn.addEventListener('click', playNext);
+            volumeSlider.addEventListener('input', (e) => {
+                const volume = e.target.value / 100;
+                audioPlayer.volume = volume;
+                volumeValue.textContent = `${e.target.value}%`;
+            });
+            audioPlayer.addEventListener('error', (e) => {
+                console.error('Audio error:', e);
+                showToast('Fehler beim Laden der Station');
+                stopPlayback();
+            });
+            audioPlayer.addEventListener('ended', () => {
+                playNext();
+            });
+            // Category filters
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+                    e.target.classList.add('active');
+                    const category = e.target.dataset.category;
+                    if (category === 'all') {
+                        filteredStations = [...radioStations];
+                    } else {
+                        filteredStations = radioStations.filter(s => s.category === category);
+                    }
+                    renderStations();
+                });
+            });
+        }
+        // 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>`;
+            currentTrack.textContent = 'Verbinde...';
+            // Update active state in list
+            document.querySelectorAll('.station-item').forEach(item => {
+                item.classList.remove('active');
+                if (parseInt(item.dataset.stationId) === currentStation.id) {
+                    item.classList.add('active');
+                }
+            });
+            // Load and play
+            audioPlayer.src = currentStation.url;
+            audioPlayer.load();
+            if (isPlaying) {
+                audioPlayer.play()
+                    .then(() => {
+                        currentTrack.textContent = 'Live Stream';
+                        showToast(`Station: ${currentStation.name}`);
+                    })
+                    .catch(err => {
+                        console.error('Play error:', err);
+                        showToast('Fehler beim Abspielen');
+                        stopPlayback();
+                    });
+            }
+        }
+        // Toggle play/pause
+        function togglePlay() {
+            if (!currentStation && currentStationIndex === -1) {
+                selectStation(0);
+            }
+            if (isPlaying) {
+                pausePlayback();
+            } else {
+                startPlayback();
+            }
+        }
+        // Start playback
+        function startPlayback() {
+            if (!currentStation) return;
+            audioPlayer.play()
+                .then(() => {
+                    isPlaying = true;
+                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    visualizer.classList.remove('paused');
+                    currentTrack.textContent = 'Live Stream';
+                })
+                .catch(err => {
+                    console.error('Play error:', err);
+                    showToast('Fehler beim Abspielen');
+                });
+        }
+        // Pause playback
+        function pausePlayback() {
+            audioPlayer.pause();
+            isPlaying = false;
+            playBtn.innerHTML = '<i class="fas fa-play"></i>';
+            visualizer.classList.add('paused');
+            currentTrack.textContent = 'Pausiert';
+        }
+        // Stop playback
+        function stopPlayback() {
+            audioPlayer.pause();
+            audioPlayer.src = '';
+            isPlaying = false;
+            playBtn.innerHTML = '<i class="fas fa-play"></i>';
+            visualizer.classList.add('paused');
+            currentTrack.textContent = '---';
+        }
+        // Play previous station
+        function playPrevious() {
+            if (currentStationIndex > 0) {
+                selectStation(currentStationIndex - 1);
+                if (!isPlaying) {
+                    togglePlay();
+                }
+            }
+        }
+        // Play next station
+        function playNext() {
+            if (currentStationIndex < radioStations.length - 1) {
+                selectStation(currentStationIndex + 1);
+                if (!isPlaying) {
+                    togglePlay();
+                }
+            }
+        }
+        // Show toast notification
+        function showToast(message) {
+            toastMessage.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Initialize app
+        init();
+    </script>
+</body>
+</html>