Site vitrine & lecteur audio pour le Studio La Mansarde

Studio la Mansarde 

Le site du studio la mansarde fût une de mes premières réalisations de site web. Il s’agit à l’origine d’un simple site vitrine ayant pour but de présenter les services d’Enzo et son studio d’enregistrement. J’ai eu l’occasion en juin 2024 de refaire le design du site web de A à Z et d’y ajouter de nombreuses fonctionnalités à l’occasion de l’ouverture de “La Cabine” un nouveau concept du studio. 

Le cahier des charges du site web 

Le site web devait permettre aux utilisateurs d’écouter en direct la musique produite au studio sans interrompre leur exploration du site. 
Voici les principaux axes de développement du nouveau site : 

• Un design moderne, efficace et avec une nouvelle esthétique 
• Un espace administrateur permettant d’alimenter un blog, de publier des chansons et des vidéos 
• Une page “La Cabine” à l’esthétique différente et une showcase vidéo 
• Un lecteur audio dynamique et persistant durant la navigation 

Les choix techniques 

Ayant trouvé un bon rythme de travail avec la stack TALL j’ai décidé de continuer dans cette lancée : 

TailwindCSS 

• AlpineJS 
• Laravel
• Livewire 
• Et filament

Livewire ayant reçu sa mise à jour 3.0 récemment, une nouvelle fonctionnalité y a été intégrée permettant à une “multi-page application” de simuler une expérience “single page application” en rendant des composants persistants lors de la navigation. C’était donc l’opportunité parfaite pour construire un lecteur audio ne se coupant pas lors du changement de page.

Les défis de développement

1. L’upload de fichiers audio

 
Les fichiers audio pouvant être assez lourds, il était hors de question pour moi de faire télécharger des fichiers non-optimisés aux visiteurs du site, ce qui aurait également rendu l’expérience très moyenne sur des connexions plus lentes.
 
 J’ai donc mis en place une compression audio automatique lors de l’upload des fichiers audio. En effet grâce à la bibliothèque ffmpeg, je peux convertir et compresser les fichiers audio en .ogg, ce qui a permis de réduire drastiquement la taille des fichiers (5 à 6x moins lourds en moyenne) afin d’améliorer l’UX du player audio.
 
 J’ai réalisé après la mise en place de ce système que les appareils Apple ne lisent malheureusement pas ce format audio, j’ai donc décidé de convertir et compresser dans 2 formats : OGG et M4A, permettant à n’importe quel utilisateur d’écouter les productions musicales de la Mansarde avec des temps de chargement réduits. Il a simplement fallu détecter grâce à JavaScript le type de matériel du client pour lui servir le bon fichier audio.
 

2. Le player audio

J’ai créé de A à Z un player audio qui s’attache au bas de l’écran (et peut-être fermé/caché) permettant de lire une musique sélectionnée, de la passer, de modifier son volume, etc…
 
Le tout en récupérant dynamiquement les fichiers audios référencés dans la base de données et stockés sur le serveur.
 
Grâce à Livewire ce composant a pu être rendu “persistant” et n’est donc pas rafraîchi lors du changement de page, concrètement, livewire peut pré-charger une page et décider de rafraîchir ou non certains composants, ce qui permet d’obtenir une expérience similaire à une SPA tout en profitant des bénéfices d’une MPA (notamment pour le référencement).

3. La Cabine

Pas de réel défi technique pour la Cabine, mais Enzo souhaitait la création d’une esthétique plus rap/urbaine pour cette page dédié à son nouveau service. J’ai donc construit la maquette sur figma.