Idée et positionnement
Définition du concept, du vocabulaire visuel et des interactions qui donnent une vraie présence à la platine.
PCd-1210Virtual Direct DriveConcevoir une platine vinyle dans un navigateur.
PCd-1210 est née d'une idée simple : garder le contrôle sur la musique que l'on écoute, même quand la source est numérique.
J'ai piloté le projet de A à Z, de l'idée initiale à l'identité graphique, de l'architecture de l'expérience aux itérations fonctionnelles, puis jusqu'aux tests, au déploiement PWA et à la mise en ligne sur PCdlabs.
Une platine virtuelle dans votre navigateur, jusque dans votre poche.
L'intention
Retrouver un geste physique dans une écoute numérique.
L'enjeu n'était pas de dessiner une simple skin de lecteur audio, mais de construire une interface où le disque, le bras, le pitch, le choix 33/45 et la bibliothèque se répondent comme un seul instrument.
Identité graphique
Création du branding PCd-1210, du favicon, de l'univers sombre et lumineux et des composants visuels de l'application.
Direction produit
Arbitrage des fonctions, du responsive, du comportement du bras, de la discothèque et des modules optionnels.
Le résultat
Une PWA qui reste cohérente du desktop au téléphone.
Le même objet passe du grand écran au smartphone : une platine virtuelle que l’on retrouve dans sa poche, avec un plateau carré, une discothèque au swipe ou au gyroscope, la recherche accessible et un branding intégrable ou isolable.
Mon rôle
Une conception itérative, jusque dans les détails.
Chaque version a servi à valider une hypothèse précise sans perdre les éléments déjà stabilisés.
Conception
Définition du produit, hiérarchie de l'interface, analogie avec une platine réelle et choix des interactions prioritaires.
Design
Logo, favicon, typographie d'interface, couleurs, effets de matière, équilibre entre skeuomorphisme et interface web contemporaine.
Développement
Pilotage du développement HTML, CSS et JavaScript, PWA, gestion de la lecture, bibliothèque, imports, pitch, bras, scratch, gyroscope et responsive.
Tests
Comparaison des versions, corrections ciblées, vérification desktop/mobile, recherche des régressions et stabilisation de l'expérience.
Mise en ligne
Préparation du package statique, service worker, manifest, déploiement sur IONOS et documentation de reprise du projet.
Technique
Le navigateur comme matière de design.
La version finale reste volontairement déployable sans compilation obligatoire. L'architecture privilégie des fichiers lisibles, un comportement progressif et la possibilité d'installer l'application comme PWA.
Manipulation directe
Le bras et le disque ne sont pas de simples illustrations. Ils répondent à la progression, au pitch, aux gestes de souris et aux interactions tactiles.
Responsive
La platine conserve sa géométrie. Les modules auxiliaires changent d'emplacement sans réduire le plateau ni couper leurs sliders.
Progressive Web App
Manifest, service worker, installation et fonctionnement web partagent la même base de code.
Open source
Un projet ouvert à l'inspection et à l'évolution.
PCd-1210 v15.2 est distribuée sous licence MIT. Le code peut être étudié, modifié et redéployé dans le respect de cette licence.
Code disponible
Le dépôt GitHub public doit accueillir la même base que celle déployée en production. Le ZIP source peut aussi être téléchargé directement depuis l'application.
Stack
HTML + CSS + JavaScript PWA / Service Worker YouTube iframe API Web Audio pour les fichiers compatibles Three.js pour les mises en scène 3D Déploiement statique IONOS
Usage légal
Lire et manipuler, sans devenir une plateforme de piratage.
L'application est conçue comme une interface de lecture. Elle n'héberge pas un catalogue musical tiers, ne contourne pas les DRM et conserve YouTube dans son lecteur/API. Les fichiers locaux restent ceux fournis par l'utilisateur.
Cette architecture vise un usage légal, mais elle ne peut pas transformer une source non autorisée en source autorisée. L'utilisateur reste responsable des droits attachés aux fichiers et liens qu'il choisit d'utiliser.
PCdlabs / Présent Composé Design
PCd-1210 Virtual Direct Drive
PCd-1210 est une platine vinyle virtuelle conçue comme une véritable expérience d'interface. Le projet transpose dans le navigateur des repères et des gestes issus de la platine physique, puis les associe à une discothèque visuelle, une playlist, un contrôle 33T/45T, un pitch, un bras dynamique, le scratch et une installation PWA.
Une idée d'abord centrée sur le geste
Le point de départ n'était pas de reproduire une platine uniquement comme objet graphique. L'objectif était de construire une interface où la logique physique reste lisible : un disque qui tourne, un bras qui accompagne l'avancement d'une piste, des vitesses 33T et 45T, un pitch lié à la lecture, puis une manipulation directe du disque pour le scratch.
Identité graphique
J'ai défini l'identité visuelle PCd-1210, le branding, les proportions générales, la hiérarchie de l'interface, les états lumineux et la cohérence entre la platine et Ma Discothèque. Le travail sur les favicons et le SVG animé prolonge cette identité jusque dans l'onglet et l'installation PWA.
Conception de l'expérience
Les interactions ont été pensées autour d'actions compréhensibles sans mode d'emploi lourd : lancer ou arrêter un titre, déplacer le bras, modifier la vitesse, régler le pitch, faire défiler les pochettes, sélectionner un disque et le manipuler directement.
Développement par itérations
Le projet a progressé par versions successives. Chaque étape a servi à consolider la lecture, les imports, la playlist, le bras, le pitch, le scratch, la discothèque, les modules audio et le responsive. Cette méthode a permis de conserver ce qui fonctionnait déjà tout en corrigeant des points précis.
Une PWA volontairement simple à déployer
PCd-1210 repose sur HTML, CSS et JavaScript natifs. La version de production n'impose aucune compilation. Le manifest, le service worker et les ressources locales permettent un déploiement direct sur un hébergement mutualisé IONOS par FileZilla.
Ma Discothèque, du swipe au gyroscope
La bibliothèque n'est pas présentée comme une grille administrative. Les pochettes restent carrées et défilent horizontalement. Le swipe reste la manipulation principale sur téléphone. Un contrôle gyroscopique peut compléter ce geste : incliner le téléphone vers la gauche ou la droite déplace le rail dans le même sens, tandis que le doigt permet d'affiner immédiatement la sélection.
Le rôle de la platine virtuelle
Le plateau, le bras et le disque ne sont pas seulement décoratifs. Ils servent de représentation de la lecture. Le pitch et les modes 33T/45T influencent la vitesse, le bras suit la progression sur la zone utile du disque et le scratch permet de déplacer la lecture en manipulant directement le vinyle.
Choix technique important : les fichiers audio directs et importés peuvent passer par Web Audio pour les traitements compatibles. YouTube reste contrôlé via son lecteur et son API. L'application ne prétend pas appliquer un traitement audio impossible au flux isolé d'une iframe.
Mon rôle, de l'idée à la mise en ligne
J'ai porté le projet depuis son idée initiale jusqu'à sa mise en ligne : définition du concept, identité graphique, conception de l'expérience, choix fonctionnels, prototypage, suivi et itération du développement, tests, corrections responsive, préparation de la PWA et déploiement. PCd-1210 conserve les crédits du projet à Alban & Emilio DESBARAX.
Technologies et contraintes
- HTML natif
- CSS responsive
- JavaScript natif
- Web Audio API
- YouTube Player API
- PWA
- Service Worker
- DeviceOrientation
- Pointer Events
- IONOS mutualisé
Un projet encore évolutif
La priorité reste une expérience 2D rapide, cohérente et compatible avec le plus grand nombre de périphériques. Le code conserve des points d'accroche pour une future intégration d'un vrai modèle 3D interactif inspiré d'une Technics SL-1210/MK2, mais cette partie n'est pas présentée comme une fonctionnalité disponible tant qu'elle n'est pas finalisée.
Tester, consulter et soutenir
L'application peut être testée directement depuis PCdlabs. Le dépôt GitHub permettra de consulter la structure du projet et ses évolutions. Le lien Buy Me a Coffee permet de soutenir le temps consacré à la conception, aux tests et aux nouvelles expérimentations.