J’avais envie de me lancer un nouveau défi : créer un espace en ligne dédié à mes créations musicales. Pas un SoundCloud, pas un Spotify — mon propre lecteur, hébergé chez moi, sans publicité, sans tracking, sans compromis. Le résultat ? Music, accessible dès maintenant sur atkati.fr/Music.
Pourquoi créer son propre lecteur ?
Quand on crée ses propres morceaux — qu’ils soient drôles, sérieux, autobiographiques ou complètement farfelus — on a envie de les partager dans un cadre qui nous ressemble. Les grandes plateformes de streaming imposent leurs règles, leurs algorithmes, leur esthétique. Moi, je voulais un truc simple : déposer mes MP3 et les rendre écoutable par tous, dans une interface qui a de la gueule.
Et puis soyons honnêtes : en tant que développeur, il y a un plaisir particulier à construire ses propres outils plutôt que de dépendre de services tiers. Surtout quand on peut le faire avec une stack légère et souveraine. 😉
Un lecteur complet, sans fioritures
Music propose tout ce qu’on attend d’un bon lecteur audio moderne :
- 🎵 Lecture fluide avec enchaînement automatique des morceaux
- 🎲 Bouton « Surprends-moi ! » pour lancer un titre au hasard
- 🔀 Modes shuffle et repeat (tout répéter ou un seul titre en boucle)
- 🏷️ Filtres par ambiance : Drôle, Sérieux, Autobio, Farfelu, Rock, Émotion, Chill, Énergie…
- 📊 Compteur d’écoutes visible sur chaque morceau
- 🔤 Tri dynamique : par défaut, plus récents, plus écoutés, alphabétique
- ⌨️ Raccourcis clavier : Espace, flèches, et plus encore
- 📱 100% responsive : aussi bien sur mobile que sur desktop
Le player se fixe en bas de l’écran et reste accessible pendant qu’on parcourt la collection. Les contrôles système (casque Bluetooth, écran de verrouillage) fonctionnent aussi grâce à la Media Session API.
Un visualiseur audio en 3 modes
C’est le petit plus qui fait plaisir : au-dessus du player, un visualiseur audio réagit en temps réel à la musique grâce à la Web Audio API. Un simple clic permet de basculer entre trois modes :
- 🟧 Barres de fréquence avec reflets miroir — le classique, toujours efficace
- 🌊 Onde sinusoïdale avec dégradé tricolore — hypnotique
- 🔵 Cercle radial pulsant avec rayons — pour les moments intenses
Le canvas s’adapte automatiquement à la résolution de l’écran (support HiDPI/Retina) et s’agrandit au survol pour mieux profiter du spectacle.
Sous le capot : la philosophie du projet
Fidèle à mes habitudes, Music est construit avec une stack minimaliste et souveraine :
- 🏗️ PHP 8 + SQLite — un seul fichier
index.phpcomme point d’entrée (routeur, API, rendu) - 🎨 HTML5 + CSS pur + JavaScript Vanilla — zéro framework, zéro dépendance externe
- 🇫🇷 Hébergé sur OVH — souveraineté numérique de bout en bout
- 🚀 Déploiement automatisé via GitHub Actions + FTP
Le projet entier tient en 2 020 lignes de code réparties sur 3 fichiers (+ un .htaccess pour la sécurité). Pas de CDN externe, pas de cookies, pas de tracker. Juste de la musique.
Et la suite ?
La collection va s’étoffer au fil du temps avec de nouvelles créations. L’idée, c’est d’avoir un espace vivant qui grandit avec moi. Des chansons drôles pour les jours de pluie, des morceaux plus personnels pour les moments de réflexion, et quelques délires bien farfelus pour le plaisir.
Si ça vous tente, faites un tour sur atkati.fr/Music, lancez un morceau et dites-moi ce que vous en pensez ! 🎶