## Radio Chaabi Dialna Live Streaming – Premium Online Radio Experience
Radio Chaabi Dialna live streaming delivers exceptional radio entertainment around the clock. Broadcasting from Algeria, this premier radio station connects listeners worldwide through high-quality streaming technology. Specializing in Chanson programming, Radio Chaabi Dialna offers carefully curated content for diverse audiences.
## Live Programming on Radio Chaabi Dialna
Experience quality programming designed to entertain and inform listeners throughout the day. Radio Chaabi Dialna live features music, talk shows, news updates, and community-focused segments.
## How to Listen to Radio Chaabi Dialna Live
Stream Radio Chaabi Dialna live through OnAirRadioStream.com with crystal-clear audio quality. The streaming service works on smartphones, tablets, computers, and smart speakers without registration. Enjoy uninterrupted Radio Chaabi Dialna live streaming with reliable connectivity and high-quality sound. Connect with Algeria’s vibrant radio culture through authentic local programming.
## Radio Chaabi Dialna Station Information
Join thousands of daily listeners who choose Radio Chaabi Dialna live for quality entertainment and information. The station maintains strong community connections while serving international audiences through online streaming. Visit the official Radio Chaabi Dialna website for program schedules and station updates. Follow Radio Chaabi Dialna on social media: Facebook, Twitter Experience premium online radio streaming with Radio Chaabi Dialna live on OnAirRadioStream.com.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Radio Chaabi Dialna : Chaabi</title>
<meta name="description" content="les chansons du chaabi, les grands maitres du chaabi, Écouter Vos Chansons Préférées gratuitement">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap&subset=latin-ext" rel="stylesheet"/>
<style>
body {
font-family: 'Bitter', serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.modern-player {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}
.modern-player::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: shimmer 8s infinite linear;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
/* CORRECTION TICKER - Z-INDEX BAS */
.ticker-wrapper {
overflow: hidden;
position: relative;
z-index: 1; /* TRÈS IMPORTANT : z-index bas */
}
.ticker-container {
display: flex;
animation: smooth-marquee 20s linear infinite;
white-space: nowrap;
padding: 10px 0;
min-width: 200%; /* IMPORTANT : pour la duplication */
}
@keyframes smooth-marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); } /* -50% car min-width: 200% */
}
.ticker-item {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.15);
padding: 12px 20px;
border-radius: 25px;
margin: 0 20px;
backdrop-filter: blur(10px);
flex-shrink: 0;
min-width: max-content;
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
}
.ticker-item:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 300% 300%;
animation: gradient 3s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.track-art {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
margin: 0 auto 20px;
border-radius: 15px;
border: 4px solid rgba(255,255,255,0.3);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}
.track-art::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
border-radius: 15px;
}
.progress-container {
background: rgba(255,255,255,0.2);
border-radius: 10px;
height: 6px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #feca57);
border-radius: 10px;
transition: width 0.1s linear;
position: relative;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.control-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}
.control-btn.play-pause {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #ff6b6b, #feca57);
}
.playlist-item {
background: rgba(255,255,255,0.1);
border-radius: 12px;
padding: 12px;
margin: 8px 0;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.playlist-item:hover {
background: rgba(255,255,255,0.2);
transform: translateX(5px);
}
.playlist-item.active {
background: linear-gradient(135deg, rgba(255,107,107,0.3), rgba(254,202,87,0.3));
border-color: rgba(255,255,255,0.3);
}
.search-box {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 25px;
padding: 12px 20px;
backdrop-filter: blur(10px);
}
.search-input {
background: transparent;
border: none;
outline: none;
width: 100%;
color: white;
}
.search-input::placeholder {
color: rgba(255,255,255,0.7);
}
/* Menu mobile */
.mobile-menu {
display: none;
}
/* CORRECTION DROPDOWN - Z-INDEX ÉLEVÉ */
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000; /* ÉLEVÉ */
}
.dropdown-group {
position: relative;
z-index: 1001; /* ENCORE PLUS ÉLEVÉ */
}
.dropdown-group:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
transition: all 0.2s ease;
}
.dropdown-item:hover {
transform: translateX(5px);
}
/* Navigation avec z-index élevé */
.desktop-menu {
position: relative;
z-index: 100; /* Élevé */
}
@media (max-width: 768px) {
.desktop-menu {
display: none;
}
.mobile-menu {
display: block;
position: relative;
z-index: 100; /* Élevé */
}
.track-art {
width: 150px;
height: 150px;
}
.modern-player {
margin: 0 1rem;
padding: 1.5rem;
}
.control-btn {
width: 45px;
height: 45px;
}
.control-btn.play-pause {
width: 60px;
height: 60px;
}
.ticker-item {
padding: 8px 15px;
margin: 0 10px;
font-size: 0.9rem;
}
/* Menu mobile amélioré */
#mobile-menu-items {
//background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000; /* Élevé */
position: relative;
}
}
/* Améliorations du player */
.player-center {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
.volume-controls {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.volume-slider {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff6b6b;
cursor: pointer;
}
</style>
</head>
<body class="min-h-screen text-white">
<!-- Navigation Desktop - Z-INDEX ÉLEVÉ -->
<nav class="glass-effect rounded-2xl mx-4 mt-4 mb-6 desktop-menu" style="z-index: 1000;">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a class="text-3xl font-bold gradient-text" href="https://webchaabi.com/index.html">
<i class="fas fa-radio mr-3"></i>RADIO CHAABI DIALNA
</a>
<div class="flex space-x-2">
<a href="https://webchaabi.com/index.html" class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all">
<i class="fas fa-home mr-2"></i>Accueil
</a>
<!-- Biographies -->
<a href="https://webchaabi.com/biographie.html" target="_blank" class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-blue-300">
<i class="fas fa-book mr-2"></i>Biographies
</a>
<!-- Interviews -->
<a href="https://webchaabi.com/intervw.html" target="_blank" class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-amber-300">
<i class="fas fa-microphone mr-2"></i>Interviews
</a>
<!-- Qacidattes -->
<a href="https://webchaabi.com/qacidattes.html" target="_blank" class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-yellow-300">
<i class="fas fa-pen-fancy mr-2"></i>Qacidattes
</a>
<!-- Bouqallattes -->
<a href="https://webchaabi.com/bouqallattes.html" target="_blank" class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-gray-300">
<i class="fas fa-book-open mr-2"></i>Bouqallattes
</a>
<!-- Dropdown Chansons -->
<div class="relative dropdown-group">
<button class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-purple-300">
<i class="fas fa-play-circle mr-2"></i>Chansons <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute top-full left-110 mt-2 w-56 glass-effect rounded-2xl shadow-2xl border border-white/10 p-2">
<a href="http://chaabi.free.fr/" class="dropdown-item flex items-center px-4 py-3 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-music text-blue-400 mr-3"></i>
<span>Chaabi</span>
</a>
<a href="http://mahfoud.z.free.fr/fetes.html" class="dropdown-item flex items-center px-4 py-3 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-star text-green-400 mr-3"></i>
<span>Fêtes</span>
</a>
<a href="http://mahfoud.z.free.fr/andalou.html" class="dropdown-item flex items-center px-4 py-3 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-guitar text-yellow-400 mr-3"></i>
<span>Andalou</span>
</a>
<a href="https://webchaabi.com/yacineandmalik.html" class="dropdown-item flex items-center px-4 py-3 rounded-lg hover:bg-white/10 transition-all">
<i class="fas fa-users text-teal-400 mr-3"></i>
<span>Yacine and Malik</span>
</a>
</div>
</div>
<!-- Dropdown Divers -->
<div class="relative dropdown-group">
<button class="flex items-center px-4 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-cyan-300">
Divers <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute top-full left-110 mt-2 w-56 glass-effect rounded-2xl shadow-2xl border border-white/10 p-2">
<a href="https://webchaabi.com/glos.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-book text-gray-300 mr-3"></i>
<span>Glossaire</span>
</a>
<a href="https://webchaabi.com/litho.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-palette text-gray-300 mr-3"></i>
<span>Lithographie</span>
</a>
<a href="https://webchaabi.com/chafia.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-user text-gray-300 mr-3"></i>
<span>Chafia Boudraa</span>
</a>
<a href="https://webchaabi.com/chroniq.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-clock text-gray-300 mr-3"></i>
<span>Chronique</span>
</a>
<a href="https://webchaabi.com/variete.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all mb-1">
<i class="fas fa-theater-masks text-gray-300 mr-3"></i>
<span>Varietes</span>
</a>
<a href="https://webchaabi.com/commentaire.html" class="dropdown-item flex items-center px-4 py-2 rounded-lg hover:bg-white/10 transition-all">
<i class="fas fa-comment text-gray-300 mr-3"></i>
<span>Commentaires</span>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Navigation Mobile COMPLÈTE -->
<nav class="glass-effect rounded-2xl mx-4 mt-4 mb-6 mobile-menu" style="z-index: 1000;">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<a class="text-xl font-bold gradient-text" href="https://webchaabi.com/index.html">
<i class="fas fa-radio mr-2"></i>RADIO CHAABI
</a>
<button id="mobile-menu-button" class="p-2 rounded-full glass-effect">
<i class="fas fa-bars"></i>
</button>
</div>
<div id="mobile-menu-items" class="hidden mt-3 space-y-2">
<a href="https://webchaabi.com/index.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-home mr-3 w-5 text-center"></i>Accueil
</a>
<a href="radiodialna.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-music mr-3 w-5 text-center"></i>Playlist
</a>
<a href="https://webchaabi.com/biographie.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-book mr-3 w-5 text-center"></i>Biographies
</a>
<a href="https://webchaabi.com/intervw.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-microphone mr-3 w-5 text-center"></i>Interviews
</a>
<a href="https://webchaabi.com/qacidattes.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-pen-fancy mr-3 w-5 text-center"></i>Qacidattes
</a>
<a href="https://webchaabi.com/bouqallattes.html" class="block px-4 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center">
<i class="fas fa-book-open mr-3 w-5 text-center"></i>Bouqallattes
</a>
<!-- Sous-menu Chansons mobile -->
<div class="pl-4 border-l-2 border-white/20">
<div class="text-sm font-semibold mb-2 opacity-75">CHANSONS</div>
<a href="http://chaabi.free.fr/" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-music mr-3 w-4 text-center"></i>Chaabi
</a>
<a href="http://mahfoud.z.free.fr/fetes.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-star mr-3 w-4 text-center"></i>Fêtes
</a>
<a href="http://mahfoud.z.free.fr/andalou.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-guitar mr-3 w-4 text-center"></i>Andalou
</a>
<a href="https://webchaabi.com/yacineandmalik.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-users mr-3 w-4 text-center"></i>Yacine and Malik
</a>
</div>
<!-- Sous-menu Divers mobile -->
<div class="pl-4 border-l-2 border-white/20">
<div class="text-sm font-semibold mb-2 opacity-75">DIVERS</div>
<a href="https://webchaabi.com/glos.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-book mr-3 w-4 text-center"></i>Glossaire
</a>
<a href="https://webchaabi.com/litho.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-palette mr-3 w-4 text-center"></i>Lithographie
</a>
<a href="https://webchaabi.com/chafia.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-user mr-3 w-4 text-center"></i>Chafia Boudraa
</a>
<a href="https://webchaabi.com/chroniq.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-clock mr-3 w-4 text-center"></i>Chronique
</a>
<a href="https://webchaabi.com/variete.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-theater-masks mr-3 w-4 text-center"></i>Varietes
</a>
<a href="https://webchaabi.com/commentaire.html" class="block px-4 py-2 rounded-lg hover:bg-white/20 transition-all text-sm flex items-center">
<i class="fas fa-comment mr-3 w-4 text-center"></i>Commentaires
</a>
</div>
</div>
</div>
</nav>
<!-- TICKER AVEC Z-INDEX TRÈS BAS -->
<div class="glass-effect rounded-2xl mx-4 mb-8 overflow-hidden" style="z-index: 1; position: relative;">
<div class="py-4">
<div class="flex items-center justify-center mb-3">
<i class="fas fa-bullhorn text-yellow-400 text-xl mr-3"></i>
<span class="font-semibold text-lg">DÉDICACES EN DIRECT</span>
</div>
<div class="ticker-wrapper">
<div class="ticker-container" id="ticker-container">
<!-- Dédicaces chargées par JavaScript -->
</div>
</div>
</div>
</div>
<!-- Le reste du code reste identique -->
<!-- Image Saint-Eugène -->
<div class="flex justify-center mb-8 px-4">
<div class="w-full max-w-4xl relative">
<img src="img/poudriere.webp" alt="Saint-Eugene" class="w-full rounded-2xl shadow-2xl">
<div class="absolute inset-0 bg-blue-200 opacity-20 blur-lg rounded-2xl -z-10 transform translate-y-6 translate-x-6"></div>
</div>
</div>
<!-- Player Modernisé -->
<div class="modern-player mx-4 mb-8 p-6">
<div class="relative z-10">
<div class="text-center mb-6">
<h2 class="text-3xl font-bold mb-2">ÉCOUTEZ EN DIRECT</h2>
<p class="text-lg opacity-90" id="player-status">Chargement de la musique...</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
<!-- Album Art & Info -->
<div class="lg:col-span-3 text-center">
<div class="track-art" id="track-art" style="background-image: url('/music/images/radiochaabi.jpeg')"></div>
<div class="mt-4">
<div class="text-xl font-bold mb-1 truncate" id="track-name">Sélectionnez une chanson</div>
<div class="text-lg opacity-90 mb-1 truncate" id="track-artist">Artiste</div>
<div class="text-sm opacity-75" id="track-views">0 écoutes</div>
</div>
</div>
<!-- Controls améliorés -->
<div class="lg:col-span-4">
<div class="player-center text-center">
<div class="flex justify-center items-center space-x-4 mb-6">
<button onclick="prevTrack()" class="control-btn">
<i class="fas fa-step-backward"></i>
</button>
<button onclick="playpauseTrack()" class="control-btn play-pause">
<i class="fas fa-play text-xl" id="play-pause-icon"></i>
</button>
<button onclick="nextTrack()" class="control-btn">
<i class="fas fa-step-forward"></i>
</button>
</div>
<!-- Progress Bar améliorée -->
<div class="mb-4">
<div class="flex justify-between text-xs mb-2">
<span id="current-time">00:00</span>
<span id="total-duration">00:00</span>
</div>
<div class="progress-container mb-3">
<div class="progress-bar" id="progress-bar"></div>
</div>
<input type="range" min="0" max="100" value="0" class="w-full volume-slider" id="seek-slider" oninput="seekTo(this.value)">
</div>
<!-- Volume amélioré -->
<div class="volume-controls">
<i class="fas fa-volume-down text-sm"></i>
<input type="range" min="0" max="100" value="80" class="volume-slider" id="volume-slider" oninput="setVolume(this.value)">
<i class="fas fa-volume-up text-sm"></i>
</div>
</div>
</div>
<!-- Playlist avec recherche -->
<div class="lg:col-span-5 glass-effect rounded-2xl p-4">
<!-- Barre de recherche -->
<div class="mb-4">
<div class="search-box mb-2">
<input type="text" id="search-input" class="search-input" placeholder="Rechercher par titre ou artiste...">
</div>
<div class="flex space-x-2">
<button onclick="searchTracks()" class="flex-1 px-3 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-sm">
<i class="fas fa-search mr-1"></i>Rechercher
</button>
<button onclick="clearSearch()" class="px-3 py-2 rounded-full glass-effect hover:bg-white/20 transition-all text-sm">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<h3 class="text-lg font-bold mb-3 text-center">
PLAYLIST <span class="text-yellow-400" id="total-songs">(0)</span>
</h3>
<div id="playlist" class="max-h-80 overflow-y-auto">
<!-- Playlist items -->
</div>
<!-- Pagination -->
<div class="flex justify-between items-center mt-3">
<button onclick="loadPreviousPage()" class="px-3 py-1 rounded-full glass-effect hover:bg-white/20 transition-all disabled:opacity-50 text-xs" id="prev-page">
<i class="fas fa-chevron-left mr-1"></i>Préc.
</button>
<span class="text-xs" id="page-info">Page 1/1</span>
<button onclick="loadNextPage()" class="px-3 py-1 rounded-full glass-effect hover:bg-white/20 transition-all disabled:opacity-50 text-xs" id="next-page">
Suiv.<i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Contenu Principal -->
<main class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column - About -->
<div class="lg:col-span-2">
<!-- About Section -->
<div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
<div class="flex flex-col md:flex-row items-center">
<img class="w-32 h-32 rounded-full object-cover border-4 border-blue-100 shadow-lg mb-4 md:mb-0 md:mr-6" src="mahfoud-z.jpg" alt="Mahfoud">
<div class="text-center md:text-left">
<h2 class="text-3xl font-bold text-gray-800 mb-2">Mahfoud</h2>
<p class="text-lg text-gray-600 mb-4">Créateur de Radio Chaabi Dialna</p>
<p class="text-gray-700">a crée le site Chaabi Dialna La musique Algérienne (webchaabi.com). Articles sur les chanteurs Algériens, leurs interviews, Chansons et poèmes traduit [Qacidattes). Animateur Radio depuis 1979 en France (Paris)...</p>
</div>
</div>
<div class="flex justify-center space-x-4 mt-6">
<a href="https://www.facebook.com/radiochaabidialna/" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition-all">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/webchaabi" class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full transition-all">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/mahfoudzalouk/" class="bg-blue-700 hover:bg-blue-800 text-white p-3 rounded-full transition-all">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://webchaabi.com/contact.html" class="bg-red-500 hover:bg-red-600 text-white p-3 rounded-full transition-all">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<!-- Dédicaces Récentes -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-3xl font-bold mb-6 text-center gradient-text">DÉDICACES RÉCENTES</h2>
<div id="recent-dedicaces" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Dédicaces chargées par JavaScript -->
</div>
</div>
</div>
<!-- Right Column - Features -->
<div class="space-y-6">
<!-- Quick Links -->
<div class="bg-white rounded-2xl shadow-xl p-6">
<h3 class="text-2xl font-bold text-gray-800 mb-4">Rubriques populaires</h3>
<div class="space-y-4">
<a href="http://mahfoud.zalouk.free.fr/emissions.html" class="flex items-center p-4 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg hover:from-blue-100 hover:to-cyan-100 transition-all">
<i class="fas fa-podcast text-blue-500 text-xl mr-4"></i>
<div>
<h4 class="font-semibold text-gray-800">Mes Émissions</h4>
<p class="text-sm text-gray-600">Retrouvez toutes mes émissions</p>
</div>
</a>
<a href="http://mahfoud.z.free.fr/fetes.html" class="flex items-center p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg hover:from-green-100 hover:to-emerald-100 transition-all">
<i class="fas fa-music text-green-500 text-xl mr-4"></i>
<div>
<h4 class="font-semibold text-gray-800">Fêtes Chaabi</h4>
<p class="text-sm text-gray-600">Célébrations musicales complètes</p>
</div>
</a>
<a href="http://mahfoud.z.free.fr/andalou.html" class="flex items-center p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg hover:from-purple-100 hover:to-pink-100 transition-all">
<i class="fas fa-guitar text-purple-500 text-xl mr-4"></i>
<div>
<h4 class="font-semibold text-gray-800">Musique Andalouse</h4>
<p class="text-sm text-gray-600">Héritage arabo-andalou</p>
</div>
</a>
<a href="https://webchaabi.com/biographie.html" class="flex items-center p-4 bg-gradient-to-r from-orange-50 to-red-50 rounded-lg hover:from-orange-100 hover:to-red-100 transition-all">
<i class="fas fa-book text-orange-500 text-xl mr-4"></i>
<div>
<h4 class="font-semibold text-gray-800">Biographies</h4>
<p class="text-sm text-gray-600">Vie des artistes chaabi</p>
</div>
</a>
<a href="http://chaabi.free.fr/" class="flex items-center p-4 bg-gradient-to-r from-teal-50 to-blue-50 rounded-lg hover:from-teal-100 hover:to-blue-100 transition-all">
<i class="fas fa-microphone text-teal-500 text-xl mr-4"></i>
<div>
<h4 class="font-semibold text-gray-800">Chaabi Traditionnel</h4>
<p class="text-sm text-gray-600">Musique chaabi classique</p>
</div>
</a>
</div>
</div>
<!-- Statistics -->
<div class="bg-gradient-to-br from-blue-500 to-cyan-600 text-white rounded-2xl shadow-xl p-6">
<h3 class="text-2xl font-bold mb-4">Radio en chiffres</h3>
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div class="text-3xl font-bold" id="stats-songs">0</div>
<div class="text-sm opacity-90">Chansons</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold" id="stats-artists">0</div>
<div class="text-sm opacity-90">Artistes</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold">24/7</div>
<div class="text-sm opacity-90">Diffusion</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold" id="stats-dedicaces">0</div>
<div class="text-sm opacity-90">Dédicaces</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 mt-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-xl font-bold mb-4 gradient-text">Radio Chaabi Dialna</h4>
<p class="text-gray-400">Votre radio de musique Chaabi algérienne 24h/24</p>
</div>
<div>
<h5 class="font-semibold mb-4">Navigation</h5>
<ul class="space-y-2 text-gray-400">
<li><a href="radiodialna.html" class="hover:text-white transition-colors">Radio Chaabi</a></li>
<li><a href="https://webchaabi.com/index.html" class="hover:text-white transition-colors">Accueil</a></li>
<li><a href="https://webchaabi.com/biographie.html" class="hover:text-white transition-colors">Biographies</a></li>
<li><a href="https://webchaabi.com/contact.html" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold mb-4">Musique</h5>
<ul class="space-y-2 text-gray-400">
<li><a href="http://chaabi.free.fr/" class="hover:text-white transition-colors">Chaabi</a></li>
<li><a href="http://mahfoud.z.free.fr/fetes.html" class="hover:text-white transition-colors">Fêtes</a></li>
<li><a href="http://mahfoud.z.free.fr/andalou.html" class="hover:text-white transition-colors">Andalou</a></li>
<li><a href="http://mahfoud.zalouk.free.fr/emissions.html" class="hover:text-white transition-colors">Émissions</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold mb-4">Contact</h5>
<div class="text-gray-400">
<p class="mb-2"><i class="fas fa-envelope mr-2"></i>contact@webchaabi.com</p>
<div class="flex space-x-3 mt-4">
<a href="https://www.facebook.com/radiochaabidialna/" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/webchaabi" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 Radio Chaabi Dialna. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
class ModernRadioPlayer {
constructor() {
this.tracks = [];
this.filteredTracks = [];
this.currentTrackIndex = 0;
this.isPlaying = false;
this.audio = new Audio();
this.updateTimer = null;
this.currentPage = 1;
this.totalPages = 1;
this.limit = 10;
this.isSearching = false;
this.searchTerm = '';
this.initializePlayer();
}
async initializePlayer() {
await this.loadTracks(1);
this.setupEventListeners();
this.loadDedicaces();
this.loadRecentDedicaces();
this.updateStats();
this.setupMobileMenu();
}
async loadTracks(page = 1) {
try {
const response = await fetch(`api/chansons.php?page=${page}&limit=${this.limit}`);
const data = await response.json();
if (data.success) {
this.tracks = data.chansons;
this.filteredTracks = [...this.tracks];
this.currentPage = data.pagination.page;
this.totalPages = data.pagination.totalPages;
this.displayPlaylist();
this.updatePagination();
document.getElementById('player-status').textContent =
`${data.pagination.total} chansons disponibles`;
document.getElementById('total-songs').textContent = `(${data.pagination.total})`;
document.getElementById('stats-songs').textContent = data.pagination.total;
this.updateStats();
}
} catch (error) {
console.error('Erreur chargement des chansons:', error);
document.getElementById('player-status').textContent = 'Erreur de chargement';
}
}
async loadDedicaces() {
try {
const response = await fetch('api/dedicaces.php?limit=5');
const data = await response.json();
if (data.success) {
this.displayTickerDedicaces(data.dedicaces);
document.getElementById('stats-dedicaces').textContent = data.dedicaces.length;
}
} catch (error) {
console.error('Erreur chargement dédicaces:', error);
}
}
async loadRecentDedicaces() {
try {
const response = await fetch('api/dedicaces.php?limit=4');
const data = await response.json();
if (data.success) {
this.displayRecentDedicaces(data.dedicaces);
}
} catch (error) {
console.error('Erreur chargement dédicaces récentes:', error);
}
}
// CORRECTION : Ajouter async devant searchTracks
async searchTracks() {
const searchInput = document.getElementById('search-input');
this.searchTerm = searchInput.value.trim();
if (this.searchTerm === '') {
this.clearSearch();
return;
}
this.isSearching = true;
try {
// Appeler l'API avec le paramètre de recherche
const response = await fetch(`api/chansons.php?search=${encodeURIComponent(this.searchTerm)}&limit=100`);
const data = await response.json();
if (data.success) {
this.filteredTracks = data.chansons;
this.currentTrackIndex = 0;
this.displayPlaylist();
document.getElementById('total-songs').textContent = `(${this.filteredTracks.length})`;
document.getElementById('page-info').textContent = `Recherche: "${this.searchTerm}"`;
document.getElementById('prev-page').disabled = true;
document.getElementById('next-page').disabled = true;
document.getElementById('player-status').textContent =
`${this.filteredTracks.length} résultats pour "${this.searchTerm}"`;
} else {
throw new Error(data.message);
}
} catch (error) {
console.error('Erreur recherche API:', error);
// Fallback: recherche côté client
this.filteredTracks = this.tracks.filter(track => {
const titre = track.titre ? track.titre.toLowerCase() : '';
const artiste = track.artiste_nom ? track.artiste_nom.toLowerCase() : '';
const searchTermLower = this.searchTerm.toLowerCase();
return titre.includes(searchTermLower) || artiste.includes(searchTermLower);
});
this.currentTrackIndex = 0;
this.displayPlaylist();
document.getElementById('total-songs').textContent = `(${this.filteredTracks.length})`;
document.getElementById('page-info').textContent = `Recherche locale: "${this.searchTerm}"`;
document.getElementById('prev-page').disabled = true;
document.getElementById('next-page').disabled = true;
document.getElementById('player-status').textContent =
`${this.filteredTracks.length} résultats locaux pour "${this.searchTerm}"`;
}
}
clearSearch() {
this.isSearching = false;
this.searchTerm = '';
this.filteredTracks = [...this.tracks];
this.currentTrackIndex = 0;
document.getElementById('search-input').value = '';
this.displayPlaylist();
this.updatePagination();
document.getElementById('total-songs').textContent = `(${this.tracks.length})`;
}
updateStats() {
const uniqueArtists = [...new Set(this.tracks.map(track => track.artiste_nom))].filter(Boolean);
document.getElementById('stats-artists').textContent = uniqueArtists.length;
}
displayTickerDedicaces(dedicaces) {
const tickerContainer = document.getElementById('ticker-container');
tickerContainer.innerHTML = '';
if (dedicaces && dedicaces.length > 0) {
// CORRECTION : Dupliquer 4 fois pour un défilement continu
const duplicatedDedicaces = [];
for (let i = 0; i < 4; i++) {
duplicatedDedicaces.push(...dedicaces);
}
duplicatedDedicaces.forEach((dedicace, index) => {
const dedicaceElement = document.createElement('div');
dedicaceElement.className = 'ticker-item';
dedicaceElement.innerHTML = `
<i class="fas fa-heart text-red-400 mr-3"></i>
<span class="font-semibold">${dedicace.nom}</span>
<span class="mx-2">🎵</span>
<span class="font-semibold">${dedicace.pour || 'Tous nos auditeurs'}</span>
<span class="mx-2">→</span>
<span class="max-w-md truncate">${dedicace.description}</span>
<span class="ml-3 text-xs opacity-75">
${new Date(dedicace.created_at).toLocaleDateString('fr-FR')}
</span>
`;
tickerContainer.appendChild(dedicaceElement);
});
} else {
// Message par défaut aussi dupliqué
for (let i = 0; i < 4; i++) {
const messageElement = document.createElement('div');
messageElement.className = 'ticker-item';
messageElement.innerHTML = `
<i class="fas fa-info-circle mr-3 text-blue-400"></i>
Soyez le premier à envoyer une dédicace !
`;
tickerContainer.appendChild(messageElement);
}
}
}
displayRecentDedicaces(dedicaces) {
const container = document.getElementById('recent-dedicaces');
container.innerHTML = '';
if (dedicaces && dedicaces.length > 0) {
dedicaces.forEach(dedicace => {
const timeAgo = this.getTimeAgo(dedicace.created_at);
const dedicaceElement = document.createElement('div');
dedicaceElement.className = 'glass-effect rounded-xl p-4';
dedicaceElement.innerHTML = `
<div class="flex items-start justify-between mb-3">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-red-400 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-user text-white text-sm"></i>
</div>
<div>
<div class="font-bold">${dedicace.nom}</div>
<div class="text-sm opacity-75">Pour ${dedicace.pour || `quelqu'un de spécial`}</div>
</div>
</div>
<span class="text-xs opacity-60">${timeAgo}</span>
</div>
<p class="text-sm italic mb-3">"${dedicace.description}"</p>
`;
container.appendChild(dedicaceElement);
});
} else {
container.innerHTML = `
<div class="col-span-2 text-center py-8">
<i class="fas fa-inbox text-4xl opacity-50 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Aucune dédicace pour le moment</h3>
<p class="opacity-75">Soyez le premier à envoyer un message !</p>
</div>
`;
}
}
getTimeAgo(dateString) {
const date = new Date(dateString);
const now = new Date();
const diffMs = now - date;
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'À l\'instant';
if (diffMins < 60) return `Il y a ${diffMins} min`;
if (diffHours < 24) return `Il y a ${diffHours} h`;
if (diffDays < 7) return `Il y a ${diffDays} j`;
return date.toLocaleDateString('fr-FR');
}
displayPlaylist() {
const playlistElement = document.getElementById('playlist');
playlistElement.innerHTML = '';
const tracksToDisplay = this.isSearching ? this.filteredTracks : this.tracks;
if (tracksToDisplay.length === 0) {
playlistElement.innerHTML = `
<div class="text-center py-8 text-gray-300">
<i class="fas fa-search text-4xl mb-3 opacity-50"></i>
<p>Aucun résultat trouvé</p>
</div>
`;
return;
}
tracksToDisplay.forEach((track, index) => {
const trackElement = document.createElement('div');
trackElement.className = `playlist-item ${index === this.currentTrackIndex ? 'active' : ''}`;
trackElement.onclick = () => this.loadTrack(index);
trackElement.innerHTML = `
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-cover bg-center mr-3" style="background-image: url('${track.image || 'img/poudriere.webp'}')"></div>
<div class="flex-1 min-w-0">
<div class="font-semibold truncate text-sm">${track.titre}</div>
<div class="text-xs opacity-80 truncate">${track.artiste_nom || 'Artiste inconnu'}</div>
</div>
<div class="text-xs opacity-60 ml-2">
<i class="fas fa-play mr-1"></i>${track.views || 0}
</div>
</div>
`;
playlistElement.appendChild(trackElement);
});
}
updatePagination() {
document.getElementById('page-info').textContent =
`Page ${this.currentPage}/${this.totalPages}`;
document.getElementById('prev-page').disabled = this.currentPage <= 1;
document.getElementById('next-page').disabled = this.currentPage >= this.totalPages;
}
loadTrack(index) {
const tracksToUse = this.isSearching ? this.filteredTracks : this.tracks;
if (index < 0 || index >= tracksToUse.length) return;
this.currentTrackIndex = index;
const track = tracksToUse[index];
// Mettre à jour l'interface
document.getElementById('track-name').textContent = track.titre;
document.getElementById('track-artist').textContent = track.artiste_nom || 'Artiste inconnu';
document.getElementById('track-views').textContent = `${track.views || 0} écoutes`;
// Image de la piste
const trackArt = document.getElementById('track-art');
trackArt.style.backgroundImage = `url('${track.image || 'img/poudriere.webp'}')`;
// Charger l'audio avec gestion d'erreur
this.audio.preload = 'metadata';
// Vérifier si le fichier audio existe
this.checkAudioFile(track.audio).then(exists => {
if (exists) {
this.audio.src = track.audio;
this.audio.load();
this.playTrack();
} else {
console.error('Fichier audio non trouvé:', track.audio);
document.getElementById('player-status').textContent = 'Fichier audio non disponible';
this.pauseTrack();
}
}).catch(error => {
console.error('Erreur vérification fichier:', error);
document.getElementById('player-status').textContent = 'Erreur de chargement';
});
this.highlightCurrentTrack();
}
async checkAudioFile(url) {
try {
const response = await fetch(url, { method: 'HEAD' });
return response.ok;
} catch (error) {
return false;
}
}
playpauseTrack() {
if (this.filteredTracks.length === 0) return;
if (this.isPlaying) {
this.pauseTrack();
} else {
this.playTrack();
}
}
async playTrack() {
try {
if (!this.audio.src) {
console.error('Aucune source audio disponible');
return;
}
await this.audio.play();
this.isPlaying = true;
document.getElementById('play-pause-icon').className = 'fas fa-pause';
this.startProgressTracking();
document.getElementById('player-status').textContent = 'En lecture';
} catch (error) {
console.error('Erreur lecture:', error);
document.getElementById('player-status').textContent = 'Erreur de lecture';
}
}
pauseTrack() {
this.audio.pause();
this.isPlaying = false;
document.getElementById('play-pause-icon').className = 'fas fa-play';
clearInterval(this.updateTimer);
document.getElementById('player-status').textContent = 'En pause';
}
startProgressTracking() {
clearInterval(this.updateTimer);
this.updateTimer = setInterval(() => {
if (!this.audio.duration) return;
const progress = (this.audio.currentTime / this.audio.duration) * 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
document.getElementById('current-time').textContent = this.formatTime(this.audio.currentTime);
document.getElementById('total-duration').textContent = this.formatTime(this.audio.duration);
}, 100);
}
nextTrack() {
const tracksToUse = this.isSearching ? this.filteredTracks : this.tracks;
const nextIndex = (this.currentTrackIndex + 1) % tracksToUse.length;
this.loadTrack(nextIndex);
}
prevTrack() {
const tracksToUse = this.isSearching ? this.filteredTracks : this.tracks;
const prevIndex = (this.currentTrackIndex - 1 + tracksToUse.length) % tracksToUse.length;
this.loadTrack(prevIndex);
}
seekTo(value) {
if (!this.audio.duration) return;
const seekTime = (value / 100) * this.audio.duration;
this.audio.currentTime = seekTime;
}
setVolume(value) {
this.audio.volume = value / 100;
}
formatTime(seconds) {
if (isNaN(seconds)) return '00:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
highlightCurrentTrack() {
const tracks = document.querySelectorAll('.playlist-item');
tracks.forEach((track, index) => {
track.className = `playlist-item ${index === this.currentTrackIndex ? 'active' : ''}`;
});
}
setupEventListeners() {
this.audio.addEventListener('ended', () => this.nextTrack());
this.audio.addEventListener('loadedmetadata', () => {
document.getElementById('total-duration').textContent = this.formatTime(this.audio.duration);
});
// Recherche avec la touche Entrée
document.getElementById('search-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.searchTracks();
}
});
// Recherche en temps réel
document.getElementById('search-input').addEventListener('input', (e) => {
if (e.target.value.trim() === '') {
this.clearSearch();
}
});
}
setupMobileMenu() {
const menuButton = document.getElementById('mobile-menu-button');
const menuItems = document.getElementById('mobile-menu-items');
menuButton.addEventListener('click', () => {
menuItems.classList.toggle('hidden');
});
}
loadNextPage() {
if (this.isSearching) return;
if (this.currentPage < this.totalPages) {
this.loadTracks(this.currentPage + 1);
}
}
loadPreviousPage() {
if (this.isSearching) return;
if (this.currentPage > 1) {
this.loadTracks(this.currentPage - 1);
}
}
}
// Initialisation
let radioPlayer;
document.addEventListener('DOMContentLoaded', () => {
radioPlayer = new ModernRadioPlayer();
});
// Fonctions globales
function playpauseTrack() { radioPlayer.playpauseTrack(); }
function nextTrack() { radioPlayer.nextTrack(); }
function prevTrack() { radioPlayer.prevTrack(); }
function seekTo(value) { radioPlayer.seekTo(value); }
function setVolume(value) { radioPlayer.setVolume(value); }
function loadNextPage() { radioPlayer.loadNextPage(); }
function loadPreviousPage() { radioPlayer.loadPreviousPage(); }
function searchTracks() { radioPlayer.searchTracks(); }
function clearSearch() { radioPlayer.clearSearch(); }
</script>
</body>
</html>No schedule/history available.
