Contexte du projet
NRJ Var (anciennement NRJ Saint-Tropez) est une radio locale émettant sur la Côte d'Azur, couvrant le Var et les Alpes-Maritimes. Membre du réseau NRJ, la station diffuse un mix de hits musicaux et d'actualités locales.
En 2012, la radio souhaitait moderniser son site web pour :
- Offrir l'écoute en direct du flux audio
- Présenter les animateurs et les émissions
- Publier les actualités locales et événements
- Diffuser les podcasts des émissions
- Interagir avec les auditeurs (concours, jeux)
- Optimiser le référencement local
L'objectif était de créer un site dynamique et moderne reflétant l'énergie de la radio, tout en restant simple d'utilisation pour l'équipe éditoriale qui devait mettre à jour le contenu quotidiennement.
Technologies utilisées
Backend
- PHP 5.4 avec architecture MVC
- MySQL pour le contenu éditorial
- PDO pour les requêtes sécurisées
- Sessions PHP pour les votes et concours
Frontend
- HTML5 : balises sémantiques et audio
- CSS3 : animations et responsive design
- JavaScript (jQuery) pour l'interactivité
- HTML5 Audio API pour le player radio
- AJAX pour le chargement dynamique
Services tiers
- Shoutcast/Icecast : serveur streaming audio
- SoundCloud API : hébergement podcasts
- Facebook/Twitter APIs : intégration réseaux sociaux
- Google Analytics : statistiques d'audience
CMS custom
- Back-office développé sur mesure
- Gestion du contenu (actualités, émissions, animateurs)
- Upload de photos et podcasts
- Planning des émissions
- Modération des commentaires
Fonctionnalités principales
Player radio en direct
Lecture du flux live :
- Player HTML5 audio intégré au site
- Streaming depuis serveur Shoutcast
- Contrôles : play/pause, volume
- Affichage du titre en cours de diffusion (metadata Icecast)
- Mini-player sticky (suit le scroll de la page)
- Popout player : fenêtre détachable
Optimisations :
- Fallback Flash pour navigateurs anciens (2012)
- Buffering optimisé pour connexions faibles
- Auto-play optionnel (selon préférence utilisateur)
- Indicateur visuel : animation "ondes" pendant lecture
Grille des programmes
Planning hebdomadaire :
- Tableau horaire des émissions
- Nom de l'émission et animateur
- Photo et lien vers page dédiée
- Jours de diffusion
- Repeat automatique pour émissions récurrentes
Page émission :
- Description complète
- Photo de l'animateur
- Horaires de diffusion
- Podcasts des dernières diffusions
- Formulaire de contact animateur
Actualités locales
Articles éditoriaux :
- Actualités du Var et région PACA
- Événements locaux (concerts, festivals, soirées)
- Interviews d'artistes
- Jeux concours
- Catégories : musique, sorties, sport, culture
Fonctionnalités :
- Éditeur WYSIWYG (TinyMCE) pour rédaction
- Upload d'images avec galeries
- Embed YouTube/Dailymotion pour vidéos
- Partage réseaux sociaux (Facebook, Twitter)
- Commentaires des auditeurs (modération a priori)
- Articles similaires (algorithme basique)
- Newsletter : inscription et envoi hebdomadaire
Podcasts & replay
Bibliothèque de podcasts :
- Archivage des meilleures émissions
- Classement par émission et date
- Player HTML5 intégré pour écoute
- Téléchargement MP3 autorisé
- Durée et taille du fichier affichées
Intégration SoundCloud :
- Hébergement externe des fichiers audio
- Widget SoundCloud embed sur le site
- Statistiques d'écoute
- Commentaires et partages
Animateurs & équipe
Présentation de l'équipe :
- Trombinoscope des animateurs
- Biographie et parcours
- Émissions animées
- Réseaux sociaux personnels
- Formulaire de contact direct
Interactivité :
- Dédicaces en ligne (formulaire)
- Demande de titre (wishlist)
- Messages aux animateurs
- Photos avec les auditeurs (galeries)
Jeux & concours
Système de concours :
- Formulaire de participation
- Règlement et conditions
- Tirage au sort automatique
- Gestion des gagnants (back-office)
- Validation des gains (lots à retirer)
Jeux récurrents :
- "Le hit de la semaine" (vote)
- "Photo mystère" (devine et gagne)
- "Blind test" du vendredi
- Concours billets concerts/festivals
Intégration réseaux sociaux
Widgets sociaux :
- Flux Facebook de la page NRJ Var
- Timeline Twitter des derniers tweets
- Instagram : photos des événements
- Boutons de partage sur chaque contenu
Viralité :
- Partage facilité (Open Graph)
- Hashtags personnalisés (#NRJVar)
- Concours avec partage obligatoire
Référencement local
SEO optimisé :
- Meta titles/descriptions par page
- URLs SEO-friendly (slug)
- Schema.org : RadioStation
- Sitemap XML généré automatiquement
- Google My Business synchronisé
Ciblage géographique :
- Mots-clés locaux : "radio Var", "radio Saint-Tropez", "NRJ Côte d'Azur"
- Pages par ville : Toulon, Hyères, Fréjus, Saint-Tropez
- Contenus géolocalisés (événements)
- Google Maps : localisation des studios
Back-office CMS
Gestion du contenu :
- Dashboard avec statistiques (visites, pages vues)
- CRUD articles (Create, Read, Update, Delete)
- Gestion médias : upload photos/audio
- Modération commentaires
- Planification des publications (scheduled posts)
- Utilisateurs : rédacteurs, modérateurs, admin
Gestion technique :
- Méta-tags SEO par page
- Redirections 301
- Cache : purge manuelle
- Logs d'erreurs
Résultats
Audience & trafic
Croissance du trafic :
- +250% de visites la première année vs ancien site
- 15 000 visiteurs uniques/mois en moyenne
- Pics à 50 000 pendant l'été (Saint-Tropez)
- Pages vues : 4,5 pages/session
- Durée moyenne : 3min 20s
Écoute en direct :
- 2 000 écoutes simultanées en moyenne
- Pics à 8 000 pendant événements (NRJ Music Tour)
- 40% du trafic écoute le live
- Durée d'écoute : 18 minutes en moyenne
Podcasts :
- 500 écoutes/mois par podcast en moyenne
- Émissions populaires : 2000+ écoutes
- Downloads : 150/mois
- Fidélisation via podcasts : +20%
Engagement communauté
Interactivité :
- 300 commentaires/mois en moyenne
- 50 participations/concours
- Taux de participation jeux : 8%
- 1 500 abonnés newsletter
Réseaux sociaux :
- +180% de fans Facebook (25k → 70k)
- Partages : 500/mois en moyenne
- Mentions Twitter : 200/mois
- Engagement rate : 5,2%
Référencement
Positions Google :
- 1ère page sur "radio var", "nrj var"
- Top 3 sur "radio saint-tropez"
- Featured snippet sur "écouter radio var en ligne"
- +400% de trafic organique
Visibilité locale :
- Présence Google Maps optimisée
- Avis Google : 4,6/5 (180 avis)
- Répertorié sur TuneIn, Radio.fr, etc.
Satisfaction client
Retours de l'équipe radio :
- Back-office simple et intuitif
- Autonomie totale pour la publication
- Statistiques utiles pour la régie pub
- 0 formation nécessaire (UX réussie)
Retours auditeurs :
"Super site, enfin on peut écouter NRJ Var partout dans le monde !" — Auditeur expatrié
"Les podcasts sont top, je peux réécouter l'émission du matin !" — Julie, auditrice fidèle
Défis techniques
Player audio HTML5 cross-browser
Défi : compatibilité HTML5 Audio en 2012 (tous navigateurs) :
Solutions :
- HTML5 Audio en priorité
- Fallback Flash pour IE8/9 (JW Player)
- Détection automatique du navigateur
- Progressive enhancement
Gestion du streaming :
const audio = new Audio('http://stream.nrjvar.com:8000');
audio.play();
// Metadata (titre en cours)
audio.addEventListener('metadata', (e) => {
document.getElementById('nowplaying').innerText = e.data.title;
});
Optimisations :
- Buffering adaptatif selon bande passante
- Reconnexion auto si coupure stream
- Volume sauvegardé en localStorage
Gestion des podcasts audio
Hébergement et diffusion des fichiers MP3 :
Stratégie :
- SoundCloud pour l'hébergement (CDN gratuit)
- Embed widget SoundCloud sur le site
- Alternative : upload direct sur serveur + streaming PHP
Upload optimisé :
- Conversion automatique MP3 (FFmpeg)
- Normalisation audio (-23 LUFS)
- Compression optimale (128 kbps)
- Génération waveform visuelle
Responsive design (2012)
Mobile-first n'était pas encore la norme :
Approche :
- Desktop-first avec breakpoints
- Media queries CSS3
- Touch events pour le player mobile
- Lazy loading images
Player mobile :
- Contrôles tactiles adaptés (gros boutons)
- Mini-player collapsible
- Mode paysage optimisé
- Consommation batterie minimisée
Intégration Shoutcast/Icecast
Récupération des métadonnées en temps réel :
API Shoutcast :
// Récupération titre en cours
$fp = fsockopen('stream.nrjvar.com', 8000, $errno, $errstr, 30);
fputs($fp, "GET /7.html HTTP/1.0\r\n\r\n");
$metadata = fread($fp, 1024);
fclose($fp);
// Parsing metadata
preg_match('/<SONGTITLE>(.*?)<\/SONGTITLE>/', $metadata, $matches);
$nowPlaying = $matches[1];
Affichage temps réel :
- AJAX polling toutes les 10s
- Mise à jour sans rechargement page
- Historique des titres joués
Modération des commentaires
Protection contre spam et abus :
Système implémenté :
- Captcha sur formulaire commentaire
- Modération a priori (validation avant publication)
- Blacklist mots interdits
- Akismet pour détection spam
- IP ban pour récidivistes
Workflow modération :
- Commentaire soumis → queue modération
- Email notification modérateur
- Validation/rejet en 1 clic depuis email
- Publication automatique si approuvé
Architecture technique
nrj-var-website/
├── public/
│ ├── index.php
│ ├── css/
│ │ ├── style.css
│ │ └── responsive.css
│ ├── js/
│ │ ├── player.js (HTML5 Audio)
│ │ ├── nowplaying.js (Metadata AJAX)
│ │ └── social.js (Facebook/Twitter)
│ ├── images/
│ └── podcasts/ (MP3 files)
├── app/
│ ├── controllers/
│ │ ├── RadioController.php (Player)
│ │ ├── NewsController.php (Actualités)
│ │ ├── ShowController.php (Émissions)
│ │ └── PodcastController.php
│ ├── models/
│ │ ├── Article.php
│ │ ├── Show.php
│ │ ├── Animator.php
│ │ └── Podcast.php
│ └── views/
├── admin/
│ ├── dashboard.php
│ ├── articles.php
│ └── moderation.php
└── cron/
├── newsletter.php (Envoi hebdomadaire)
└── sitemap.php (Génération quotidienne)
Base de données
Tables:
- articles (id, title, content, category, author, published_at, ...)
- shows (id, name, description, animator_id, schedule, ...)
- animators (id, name, bio, photo, email, ...)
- podcasts (id, show_id, title, soundcloud_url, duration, ...)
- comments (id, article_id, author, content, status, ...)
- contests (id, title, rules, start_date, end_date, ...)
- participants (id, contest_id, name, email, answer, ...)
Ce que j'ai appris
Streaming audio web
Première expérience avec diffusion audio en ligne :
- Protocoles Shoutcast/Icecast
- HTML5 Audio API et compatibilité
- Metadata et affichage temps réel
- Buffering et optimisation streaming
- Fallback Flash pour IE
CMS sur mesure
Développement d'un back-office complet :
- CRUD générique réutilisable
- WYSIWYG intégré (TinyMCE)
- Upload et gestion médias
- Workflow de modération
- UX pour utilisateurs non techniques
Média & radio
Compréhension du secteur radio :
- Grille des programmes et planification
- Podcasting et replay
- Régie publicitaire (bannières, pré-rolls)
- Statistiques d'audience (Médiamétrie)
- Interactivité avec auditeurs
Référencement local
SEO géolocalisé :
- Keywords locaux stratégiques
- Schema.org LocalBusiness + RadioStation
- Google My Business optimisé
- Citations sur annuaires locaux
- Backlinks partenaires locaux
Ce projet NRJ Var m'a permis de découvrir le secteur des médias radio avec les spécificités du streaming audio en ligne, du podcasting et de l'animation d'une communauté locale d'auditeurs fidèles.