Embed The Radio Player In Your Website
Copy the code below and paste it into your website.
Download our desktop apps
Radio Frequenza Zero
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frequenza Zero Radio | Live Music & DJ Sets</title>
<meta name="description" content="Frequenza Zero Radio - Elegant 24/7 live music streaming platform featuring DJ sets, exclusive mixes, and curated radio shows.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#0a0a0a",
secondary: "#1a1a1a",
accent: "#d4af37",
"accent-hover": "#e6c158",
"text-light": "#f8f8f8",
"text-muted": "#a0a0a0",
"card-bg": "rgba(26, 26, 26, 0.7)"
},
fontFamily: {
'sans': ['Montserrat', 'system-ui', 'sans-serif'],
'serif': ['Playfair Display', 'serif']
},
animation: {
'fade-in': 'fadeIn 0.8s ease-out',
'slide-up': 'slideUp 0.6s ease-out',
'pulse-gold': 'pulseGold 2s infinite'
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
},
pulseGold: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.7' }
}
}
}
}
}
</script>
<style>
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
min-height: 100vh;
}
.gold-gradient {
background: linear-gradient(90deg, #d4af37 0%, #f7ef8a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glass-card {
background: rgba(26, 26, 26, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.1);
}
.gold-border {
border: 1px solid rgba(212, 175, 55, 0.3);
}
.hover-gold:hover {
border-color: #d4af37;
transform: translateY(-2px);
transition: all 0.3s ease;
}
.player-container {
background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(26, 26, 26, 0.9) 100%);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #d4af37;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.live-indicator {
box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}
.progress-bar {
background: linear-gradient(90deg, #d4af37 0%, #f7ef8a 100%);
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="text-text-light">
<!-- Header -->
<header class="sticky top-0 z-50 glass-card border-b border-gray-800">
<div class="container mx-auto px-6 py-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<!-- Logo -->
<div class="flex items-center space-x-3 mb-4 md:mb-0 animate-fade-in">
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-gradient-to-br from-accent to-accent/50">
<i class="fas fa-satellite-dish text-white text-xl"></i>
</div>
<div>
<h1 class="text-2xl font-bold font-serif">Frequenza<span class="gold-gradient">Zero</span></h1>
<p class="text-xs text-text-muted tracking-widest">RADIO</p>
</div>
</div>
<!-- Navigation -->
<nav class="flex flex-wrap justify-center gap-6 md:gap-8 mb-4 md:mb-0">
<a href="#" class="nav-link text-sm font-medium tracking-wide hover:text-accent transition-colors duration-300" onclick="handleNavigation(event, 'home')">
<i class="fas fa-home mr-2"></i>Home
</a>
<a href="#" class="nav-link text-sm font-medium tracking-wide hover:text-accent transition-colors duration-300" onclick="handleNavigation(event, 'live')">
<i class="fas fa-wave-square mr-2"></i>Live Stream
</a>
<a href="#" class="nav-link text-sm font-medium tracking-wide hover:text-accent transition-colors duration-300" onclick="handleNavigation(event, 'schedule')">
<i class="far fa-calendar-alt mr-2"></i>Schedule
</a>
<a href="#" class="nav-link text-sm font-medium tracking-wide hover:text-accent transition-colors duration-300" onclick="handleNavigation(event, 'archive')">
<i class="fas fa-archive mr-2"></i>Archive
</a>
<a href="#" class="nav-link text-sm font-medium tracking-wide hover:text-accent transition-colors duration-300" onclick="handleNavigation(event, 'about')">
<i class="fas fa-info-circle mr-2"></i>About
</a>
</nav>
<!-- User Actions -->
<div class="flex items-center space-x-4">
<button class="hidden md:flex items-center space-x-2 px-4 py-2 rounded-full gold-border hover-gold transition-all duration-300" onclick="toggleTheme()">
<i class="fas fa-palette text-accent"></i>
<span class="text-sm">Theme</span>
</button>
<button class="px-6 py-2 rounded-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent-hover hover:to-accent-hover/80 text-primary font-medium transition-all duration-300 shadow-lg" onclick="toggleSubscribe()">
<i class="fas fa-headphones mr-2"></i>Listen Live
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 md:px-6 py-8">
<!-- Hero Section -->
<section class="mb-16 animate-fade-in">
<div class="text-center mb-12">
<div class="inline-flex items-center justify-center mb-6">
<div class="w-4 h-4 rounded-full bg-accent animate-pulse-gold mr-3"></div>
<span class="text-accent font-medium tracking-widest text-sm">LIVE NOW • 24/7 STREAMING</span>
<div class="w-4 h-4 rounded-full bg-accent animate-pulse-gold ml-3"></div>
</div>
<h2 class="text-5xl md:text-6xl font-serif font-bold mb-6">
<span class="gold-gradient">Frequenza Zero</span>
</h2>
<p class="text-xl text-text-muted max-w-3xl mx-auto mb-10">
Where sound meets elegance. Experience curated live music, exclusive DJ sets, and atmospheric radio shows in pristine quality.
</p>
</div>
<!-- Main Player -->
<div class="max-w-5xl mx-auto mb-16">
<div class="player-container rounded-2xl p-8 md:p-10 shadow-2xl animate-slide-up">
<div class="flex flex-col lg:flex-row items-center gap-8">
<!-- Album Art -->
<div class="relative">
<div class="w-64 h-64 rounded-2xl overflow-hidden gold-border shadow-xl">
<img
src="https://picsum.photos/400?random=50"
alt="Current album art - Abstract golden waves"
class="w-full h-full object-cover"
loading="lazy"
/>
</div>
<div class="absolute -bottom-3 -right-3 w-16 h-16 rounded-full bg-primary gold-border flex items-center justify-center">
<div class="w-12 h-12 rounded-full bg-accent flex items-center justify-center">
<i class="fas fa-music text-primary"></i>
</div>
</div>
</div>
<!-- Player Controls -->
<div class="flex-1 w-full">
<div class="mb-8">
<h3 class="text-2xl font-bold mb-2">Now Playing</h3>
<p class="text-3xl font-serif font-semibold mb-1" id="currentTrack">Golden Hour Sessions</p>
<p class="text-text-muted text-lg" id="currentArtist">DJ Aurora • Deep House</p>
</div>
<!-- Progress -->
<div class="mb-8">
<div class="flex justify-between text-sm text-text-muted mb-3">
<span id="currentTime">2:45</span>
<span id="totalTime">58:20</span>
</div>
<div class="h-1.5 bg-secondary rounded-full overflow-hidden">
<div class="h-full progress-bar w-1/4" id="progressBar"></div>
</div>
</div>
<!-- Controls -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center space-x-6">
<button class="w-12 h-12 rounded-full gold-border hover-gold flex items-center justify-center" onclick="previousTrack()">
<i class="fas fa-step-backward text-accent"></i>
</button>
<button class="w-16 h-16 rounded-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent-hover hover:to-accent-hover/80 flex items-center justify-center shadow-lg" onclick="togglePlay()" id="playBtn">
<i class="fas fa-play text-xl text-primary"></i>
</button>
<button class="w-12 h-12 rounded-full gold-border hover-gold flex items-center justify-center" onclick="nextTrack()">
<i class="fas fa-step-forward text-accent"></i>
</button>
</div>
<div class="flex items-center space-x-4">
<button class="w-10 h-10 rounded-full gold-border hover-gold flex items-center justify-center" onclick="toggleMute()" id="muteBtn">
<i class="fas fa-volume-up text-accent"></i>
</button>
<button class="w-10 h-10 rounded-full gold-border hover-gold flex items-center justify-center" onclick="likeTrack()" id="likeBtn">
<i class="far fa-heart text-accent"></i>
</button>
<button class="w-10 h-10 rounded-full gold-border hover-gold flex items-center justify-center" onclick="shareStream()">
<i class="fas fa-share-alt text-accent"></i>
</button>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 rounded-xl glass-card">
<p class="text-2xl font-bold" id="listenerCount">1,847</p>
<p class="text-xs text-text-muted tracking-widest">LISTENERS</p>
</div>
<div class="text-center p-4 rounded-xl glass-card">
<p class="text-2xl font-bold">320</p>
<p class="text-xs text-text-muted tracking-widest">KBPS</p>
</div>
<div class="text-center p-4 rounded-xl glass-card">
<p class="text-2xl font-bold">24/7</p>
<p class="text-xs text-text-muted tracking-widest">STREAMING</p>
</div>
<div class="text-center p-4 rounded-xl glass-card">
<p class="text-2xl font-bold">#42</p>
<p class="text-xs text-text-muted tracking-widest">SESSION</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Upcoming Shows -->
<section class="mb-16 animate-slide-up">
<div class="flex items-center justify-between mb-8">
<div>
<h2 class="text-3xl font-serif font-bold mb-2">Upcoming Shows</h2>
<p class="text-text-muted">Curated sessions from our resident selectors</p>
</div>
<a href="#" class="text-accent hover:text-accent-hover font-medium flex items-center" onclick="handleNavigation(event, 'schedule')">
View All <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Schedule items will be generated by JavaScript -->
</div>
</section>
<!-- Featured Selectors -->
<section class="mb-16 animate-slide-up">
<h2 class="text-3xl font-serif font-bold mb-8 text-center">Featured Selectors</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<!-- DJ items will be generated by JavaScript -->
</div>
</section>
<!-- Radio Archive -->
<section class="mb-16 animate-slide-up">
<div class="glass-card rounded-2xl p-8">
<div class="flex flex-col md:flex-row items-center justify-between mb-8">
<div>
<h2 class="text-3xl font-serif font-bold mb-2">Radio Archive</h2>
<p class="text-text-muted">Access our collection of past broadcasts and exclusive mixes</p>
</div>
<button class="mt-4 md:mt-0 px-6 py-3 rounded-full gold-border hover-gold font-medium transition-all duration-300" onclick="handleNavigation(event, 'archive')">
<i class="fas fa-archive mr-2"></i>Browse Archive
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-6 rounded-xl bg-secondary/50 hover-gold transition-all duration-300 cursor-pointer" onclick="playArchive(1)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mr-4">
<i class="fas fa-compact-disc text-accent"></i>
</div>
<div>
<h3 class="font-bold">Ambient Series</h3>
<p class="text-sm text-text-muted">12 sessions</p>
</div>
</div>
<p class="text-sm text-text-muted">Atmospheric soundscapes and ambient journeys</p>
</div>
<div class="p-6 rounded-xl bg-secondary/50 hover-gold transition-all duration-300 cursor-pointer" onclick="playArchive(2)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mr-4">
<i class="fas fa-sliders-h text-accent"></i>
</div>
<div>
<h3 class="font-bold">DJ Sets</h3>
<p class="text-sm text-text-muted">48 mixes</p>
</div>
</div>
<p class="text-sm text-text-muted">Extended mixes from our resident selectors</p>
</div>
<div class="p-6 rounded-xl bg-secondary/50 hover-gold transition-all duration-300 cursor-pointer" onclick="playArchive(3)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mr-4">
<i class="fas fa-microphone-alt text-accent"></i>
</div>
<div>
<h3 class="font-bold">Live Sessions</h3>
<p class="text-sm text-text-muted">24 recordings</p>
</div>
</div>
<p class="text-sm text-text-muted">Recorded live performances and studio sessions</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="animate-fade-in">
<div class="glass-card rounded-2xl p-10 text-center">
<div class="max-w-2xl mx-auto">
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-accent to-accent/50 flex items-center justify-center mx-auto mb-6">
<i class="fas fa-envelope-open-text text-2xl text-primary"></i>
</div>
<h2 class="text-3xl font-serif font-bold mb-4">Stay Tuned</h2>
<p class="text-text-muted mb-8">
Subscribe to our newsletter for weekly updates on upcoming shows, exclusive mixes, and behind-the-scenes content from Frequenza Zero.
</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto" onsubmit="subscribeNewsletter(event)">
<input type="email" placeholder="Your email address" class="flex-grow px-6 py-3 rounded-full bg-secondary border border-gray-700 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent" required>
<button type="submit" class="px-8 py-3 rounded-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent-hover hover:to-accent-hover/80 text-primary font-medium transition-all duration-300 shadow-lg">
Subscribe
</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-gray-800 mt-20">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-10">
<!-- Brand -->
<div>
<div class="flex items-center space-x-3 mb-6">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-gradient-to-br from-accent to-accent/50">
<i class="fas fa-satellite-dish text-white"></i>
</div>
<div>
<h2 class="text-xl font-bold font-serif">Frequenza<span class="gold-gradient">Zero</span></h2>
<p class="text-xs text-text-muted tracking-widest">RADIO</p>
</div>
</div>
<p class="text-sm text-text-muted">
Elegant live music streaming. Curated sounds, 24/7.
</p>
</div>
<!-- Quick Links -->
<div>
<h3 class="font-bold mb-6 text-lg">Explore</h3>
<ul class="space-y-3">
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'live')">Live Stream</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'schedule')">Schedule</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'archive')">Archive</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'selectors')">Selectors</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h3 class="font-bold mb-6 text-lg">Legal</h3>
<ul class="space-y-3">
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'privacy')">Privacy Policy</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'terms')">Terms of Service</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'licensing')">Music Licensing</a></li>
<li><a href="#" class="text-text-muted hover:text-accent transition-colors text-sm" onclick="handleNavigation(event, 'cookies')">Cookie Policy</a></li>
</ul>
</div>
<!-- Connect -->
<div>
<h3 class="font-bold mb-6 text-lg">Connect</h3>
<div class="flex space-x-4 mb-6">
<a href="#" class="w-10 h-10 rounded-full gold-border flex items-center justify-center hover-gold transition-all duration-300">
<i class="fab fa-instagram text-accent"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full gold-border flex items-center justify-center hover-gold transition-all duration-300">
<i class="fab fa-twitter text-accent"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full gold-border flex items-center justify-center hover-gold transition-all duration-300">
<i class="fab fa-spotify text-accent"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full gold-border flex items-center justify-center hover-gold transition-all duration-300">
<i class="fab fa-mixcloud text-accent"></i>
</a>
</div>
<p class="text-sm text-text-muted">
For inquiries: <br>
<a href="mailto:contact@frequenzazeroradio.com" class="text-accent hover:text-accent-hover">contact@frequenzazeroradio.com</a>
</p>
</div>
</div>
<div class="pt-8 border-t border-gray-800 text-center">
<p class="text-sm text-text-muted">
© <span id="currentYear"></span> Frequenza Zero Radio. All rights reserved.
<span class="block mt-2">This is a demonstration interface for UI purposes.</span>
</p>
</div>
</div>
</footer>
<!-- Audio Player (hidden) -->
<audio id="audioPlayer" preload="none">
<source src="https://example.com/stream.mp3" type="audio/mpeg">
</audio>
<script>
// Define data at the beginning
const scheduleItems = [
{
"id": 1,
"title": "Midnight Symphony",
"selector": "Nova",
"time": "Tonight, 00:00",
"genre": "Ambient / Classical",
"imageId": 60
},
{
"id": 2,
"title": "Golden Hour",
"selector": "Aurora",
"time": "Tomorrow, 18:00",
"genre": "Deep House",
"imageId": 61
},
{
"id": 3,
"title": "Neon Dreams",
"selector": "Electra",
"time": "Friday, 22:00",
"genre": "Synthwave",
"imageId": 62
}
];
const featuredSelectors = [
{
"id": 1,
"name": "Nova",
"genre": "Ambient",
"shows": "24",
"imageId": 63,
"color": "from-purple-500 to-pink-500"
},
{
"id": 2,
"name": "Aurora",
"genre": "Deep House",
"shows": "18",
"imageId": 64,
"color": "from-blue-500 to-cyan-500"
},
{
"id": 3,
"name": "Electra",
"genre": "Synthwave",
"shows": "12",
"imageId": 65,
"color": "from-pink-500 to-red-500"
},
{
"id": 4,
"name": "Orion",
"genre": "Techno",
"shows": "16",
"imageId": 66,
"color": "from-orange-500 to-yellow-500"
}
];
const tracks = [
{ "title": "Golden Hour Sessions", "artist": "DJ Aurora", "genre": "Deep House", "duration": "58:20" },
{ "title": "Stellar Drift", "artist": "Nova", "genre": "Ambient", "duration": "45:30" },
{ "title": "Neon Pulse", "artist": "Electra", "genre": "Synthwave", "duration": "52:15" },
{ "title": "Cosmic Rhythm", "artist": "Orion", "genre": "Techno", "duration": "61:10" }
];
// State variables
let isPlaying = false;
let isMuted = false;
let isLiked = false;
let listenerCount = 1847;
let currentTrackIndex = 0;
let progressInterval;
// Initialize the page
document.addEventListener("DOMContentLoaded", function() {
// Set current year in footer
document.getElementById("currentYear").textContent = new Date().getFullYear();
// Generate schedule items
generateScheduleItems();
// Generate featured selectors
generateFeaturedSelectors();
// Update listener count periodically
setInterval(updateListenerCount, 15000);
// Initialize progress bar
initializeProgressBar();
// Set initial track
updateTrackInfo();
});
// Generate schedule items
function generateScheduleItems() {
const scheduleContainer = document.querySelector("#schedule .grid");
if (!scheduleContainer) return;
scheduleContainer.innerHTML = "";
scheduleItems.forEach(item => {
const scheduleItem = document.createElement("div");
scheduleItem.className = "glass-card rounded-xl overflow-hidden hover-gold transition-all duration-300 cursor-pointer";
scheduleItem.onclick = () => setReminder(item.id);
scheduleItem.innerHTML = `
<div class="p-6">
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<h3 class="text-xl font-bold mb-2">${item.title}</h3>
<p class="text-text-muted">with ${item.selector}</p>
</div>
<span class="text-xs font-medium px-3 py-1 rounded-full gold-border">${item.genre}</span>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-800">
<div class="flex items-center">
<i class="far fa-clock text-accent mr-2"></i>
<span class="font-medium">${item.time}</span>
</div>
<button class="text-accent hover:text-accent-hover text-sm font-medium">
<i class="far fa-bell mr-1"></i> Remind
</button>
</div>
</div>
`;
scheduleContainer.appendChild(scheduleItem);
});
}
// Generate featured selectors
function generateFeaturedSelectors() {
const selectorsContainer = document.querySelector("#featured-selectors .grid");
if (!selectorsContainer) return;
selectorsContainer.innerHTML = "";
featuredSelectors.forEach(selector => {
const selectorItem = document.createElement("div");
selectorItem.className = "text-center group cursor-pointer";
selectorItem.onclick = () => viewSelectorProfile(selector.id);
selectorItem.innerHTML = `
<div class="relative mb-6">
<div class="w-32 h-32 rounded-full mx-auto overflow-hidden gold-border p-1 group-hover:scale-105 transition-transform duration-300">
<img
src="https://picsum.photos/300?random=${selector.imageId}"
alt="${selector.name}"
class="w-full h-full object-cover rounded-full"
loading="lazy"
/>
</div>
<div class="absolute -bottom-2 -right-2 w-12 h-12 rounded-full bg-gradient-to-br ${selector.color} flex items-center justify-center shadow-lg">
<i class="fas fa-sliders-h text-white text-sm"></i>
</div>
</div>
<h3 class="text-xl font-bold mb-1">${selector.name}</h3>
<p class="text-text-muted mb-3">${selector.genre}</p>
<div class="text-sm text-accent font-medium">
<i class="fas fa-broadcast-tower mr-1"></i> ${selector.shows} shows
</div>
`;
selectorsContainer.appendChild(selectorItem);
});
}
// Navigation handler
function handleNavigation(event, sectionId) {
event.preventDefault();
// Smooth scroll for home
if (sectionId === "home") {
window.scrollTo({ top: 0, behavior: "smooth" });
return false;
}
// For other sections, show elegant notification
const sectionNames = {
"live": "Live Stream",
"schedule": "Schedule",
"archive": "Archive",
"about": "About",
"selectors": "Selectors",
"privacy": "Privacy Policy",
"terms": "Terms of Service",
"licensing": "Music Licensing",
"cookies": "Cookie Policy"
};
showNotification(`Navigating to ${sectionNames[sectionId] || sectionId}`);
return false;
}
// Toggle play/pause
function togglePlay() {
const playBtn = document.getElementById("playBtn");
const playIcon = playBtn.querySelector("i");
isPlaying = !isPlaying;
if (isPlaying) {
playIcon.className = "fas fa-pause text-xl text-primary";
playBtn.classList.add("playing");
startProgress();
showNotification("Stream started • Now playing: " + tracks[currentTrackIndex].title);
} else {
playIcon.className = "fas fa-play text-xl text-primary";
playBtn.classList.remove("playing");
stopProgress();
showNotification("Stream paused");
}
}
// Toggle mute
function toggleMute() {
const muteBtn = document.getElementById("muteBtn");
const muteIcon = muteBtn.querySelector("i");
isMuted = !isMuted;
if (isMuted) {
muteIcon.className = "fas fa-volume-mute text-accent";
showNotification("Audio muted");
} else {
muteIcon.className = "fas fa-volume-up text-accent";
showNotification("Audio unmuted");
}
}
// Like current track
function likeTrack() {
const likeBtn = document.getElementById("likeBtn");
const likeIcon = likeBtn.querySelector("i");
isLiked = !isLiked;
if (isLiked) {
likeIcon.className = "fas fa-heart text-red-400";
showNotification("Added to favorites");
} else {
likeIcon.className = "far fa-heart text-accent";
showNotification("Removed from favorites");
}
}
// Share stream
function shareStream() {
const track = tracks[currentTrackIndex];
const shareText = `Listening to "${track.title}" by ${track.artist} on Frequenza Zero Radio`;
if (navigator.share) {
navigator.share({
title: "Frequenza Zero Radio",
text: shareText,
url: window.location.href
});
} else {
// Fallback: copy to clipboard
navigator.clipboard.writeText(`${shareText} - ${window.location.href}`);
showNotification("Link copied to clipboard");
}
}
// Previous track
function previousTrack() {
currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
updateTrackInfo();
showNotification("Previous track: " + tracks[currentTrackIndex].title);
}
// Next track
function nextTrack() {
currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
updateTrackInfo();
showNotification("Next track: " + tracks[currentTrackIndex].title);
}
// Update track info
function updateTrackInfo() {
const track = tracks[currentTrackIndex];
document.getElementById("currentTrack").textContent = track.title;
document.getElementById("currentArtist").textContent = `${track.artist} • ${track.genre}`;
document.getElementById("totalTime").textContent = track.duration;
// Reset progress
document.getElementById("progressBar").style.width = "0%";
document.getElementById("currentTime").textContent = "0:00";
}
// Initialize progress bar
function initializeProgressBar() {
// Set initial progress
document.getElementById("progressBar").style.width = "25%";
document.getElementById("currentTime").textContent = "2:45";
}
// Start progress simulation
function startProgress() {
let progress = 25;
const progressBar = document.getElementById("progressBar");
const currentTimeElem = document.getElementById("currentTime");
const totalTime = 58 * 60 + 20; // 58:20 in seconds
progressInterval = setInterval(() => {
progress += 0.1;
if (progress > 100) {
progress = 0;
nextTrack();
}
progressBar.style.width = progress + "%";
// Calculate current time
const currentSeconds = Math.floor(totalTime * progress / 100);
const minutes = Math.floor(currentSeconds / 60);
const seconds = currentSeconds % 60;
currentTimeElem.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
}, 100);
}
// Stop progress simulation
function stopProgress() {
if (progressInterval) {
clearInterval(progressInterval);
}
}
// Update listener count
function updateListenerCount() {
// Simulate realistic listener count changes
const change = Math.floor(Math.random() * 41) - 20; // -20 to +20
listenerCount = Math.max(1500, listenerCount + change);
document.getElementById("listenerCount").textContent = listenerCount.toLocaleString();
}
// Set reminder
function setReminder(itemId) {
const item = scheduleItems.find(i => i.id === itemId);
if (item) {
showNotification(`Reminder set for "${item.title}" with ${item.selector}`);
}
}
// View selector profile
function viewSelectorProfile(selectorId) {
const selector = featuredSelectors.find(s => s.id === selectorId);
if (selector) {
showNotification(`Viewing ${selector.name}'s profile • ${selector.shows} shows available`);
}
}
// Play archive
function playArchive(archiveId) {
const archives = ["Ambient Series", "DJ Sets", "Live Sessions"];
showNotification(`Loading ${archives[archiveId - 1]} archive...`);
}
// Toggle subscribe
function toggleSubscribe() {
const button = document.querySelector("header button");
if (button.textContent.includes("Listen Live")) {
button.innerHTML = '<i class="fas fa-check mr-2"></i><span>Listening</span>';
togglePlay(); // Start playing
} else {
button.innerHTML = '<i class="fas fa-headphones mr-2"></i><span>Listen Live</span>';
if (isPlaying) togglePlay(); // Stop if playing
}
}
// Toggle theme (placeholder)
function toggleTheme() {
showNotification("Theme switcher • Coming soon");
}
// Subscribe to newsletter
function subscribeNewsletter(event) {
event.preventDefault();
const email = event.target.querySelector("input[type='email']").value;
showNotification(`Thank you for subscribing with ${email}! Welcome to Frequenza Zero.`);
event.target.reset();
}
// Show elegant notification
function showNotification(message) {
// Remove existing notification
const existingNotification = document.getElementById("customNotification");
if (existingNotification) {
existingNotification.remove();
}
// Create notification element
const notification = document.createElement("div");
notification.id = "customNotification";
notification.className = "fixed top-6 right-6 glass-card gold-border rounded-xl p-4 shadow-2xl z-50 animate-slide-up";
notification.style.maxWidth = "320px";
notification.innerHTML = `
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-info-circle text-accent"></i>
</div>
<div class="flex-1">
<p class="text-sm">${message}</p>
</div>
<button class="ml-2 text-text-muted hover:text-accent" onclick="this.parentElement.parentElement.remove()">
<i class="fas fa-times"></i>
</button>
</div>
`;
document.body.appendChild(notification);
// Auto-remove after 4 seconds
setTimeout(() => {
if (notification.parentElement) {
notification.remove();
}
}, 4000);
}
</script>
</body>
</html>
Latest News
More Articles
No Articles Found
Social Feed
Read More
Share
There are no feed providers connected…
Add Feed
Read More
Show Less
Share
888888888
mmmmmmmmm
ooooooooo
nnnnnnnnn
ttttttttt
uuuuuuuuu
eeeeeeeee
sssssssss
wwwwwwwww
hhhhhhhhh
rrrrrrrrr
fffffffff
iiiiiiiii
ddddddddd
aaaaaaaaa
yyyyyyyyy
888
mmm
ooo
nnn
ttt
uuu
eee
sss
www
hhh
rrr
fff
iii
888
mmm
ooo
nnn
ttt
uuu
eee
sss
www
hhh
rrr
fff
iii
ddd
aaa
yyy
month
88
88
day
88888
88888
UTC
88
88
hour
:
88
88
minute
:
88
88
second
am
pm
Program Lineup
About Us
Radio Frequenza Zero è una web radio amatoriale indipendente che sostiene la scena trap del paese. Trasmette brani di artisti emergenti, dando spazio a nuove voci, suoni underground e produzioni autentiche. Un punto d’incontro per chi vive la musica senza compromessi. 🎧🔥