Spotube est une application de streaming musical qui donne accès à quelques titres.
🔗 Démo : forth-spotube.netlify.app
L'application a été réalisée dans le cadre d'un concours : intégrer une page avec un lecteur audio/vidéo.
Plus d'informations sur le concours ici : Discord du Repaire du Web.
- SolidJS
- TypeScript
- Sass avec CSS Modules
- Vite
Ce projet utilise pnpm comme gestionnaire de paquets.
# cloner le repo
git clone https://github.com/Forthtilliath/spotube.git
cd spotube
# installer les dépendances
pnpm install
# lancer le serveur de développement
pnpm dev| Commande | Description |
|---|---|
pnpm dev |
Serveur de développement |
pnpm build |
Build de production |
pnpm serve |
Prévisualise le build de production |
Le projet réalisé est donc une application de streaming musical, utilisant plusieurs titres de musique.
En premier lieu, voici la vue de l'application. À gauche se trouve la sidebar avec la cover de l'album, le titre et l'artiste, ainsi qu'un bouton pour afficher ou non la playlist.
À droite se trouve la liste de lecture. Il est possible de cliquer sur un titre pour démarrer l'écoute. Un bouton lecture/pause est aussi présent sur la cover de la sidebar et sur la cover du titre en cours.
À ceci, un ensemble de contrôles, un lecteur et des fonctionnalités sont disponibles dans le bas de l'écran.
- Précédent : Met la musique précédente à partir de la liste de lecture. Si c'est le premier titre, le bouton est désactivé.
- Suivant : Met la musique suivante à partir de la liste de lecture. Si c'est le dernier titre, le bouton est désactivé.
- Lecture/Pause : Alterne entre la lecture et la pause du titre en cours de lecture.
- Titre et artiste : Titre de la musique et artiste du titre en cours de lecture.
- Timer : Temps actuel de la lecture audio.
- Barre de lecture : Affiche la progression de la lecture du titre. Il est aussi possible de cliquer sur celle-ci pour mettre à jour la progression.
- Temps restant : Affiche la durée totale du titre en cours. Il est également possible de cliquer dessus pour afficher le temps restant jusqu'à la fin du titre.
- Repeat : Le bouton repeat permet d'alterner entre 3 modes :
- Repeat off : Désactive le mode repeat ;
- Repeat one : Permet de répéter un titre (en cliquant sur le bouton suivant, cette option est ignorée) ;
- Repeat all : Permet de répéter la liste de lecture.
- Liste de lecture : La liste de lecture affiche tous les titres. L'ordre de lecture des titres se réfère à la liste de lecture.
- Mode aléatoire : Le bouton permet d'activer ou non le mode aléatoire. Activer le mode aléatoire génère la liste de lecture de façon aléatoire. Tous les titres seront écoutés une seule fois. Désactiver le mode remet les titres dans l'ordre de base. Réactiver à nouveau le mode génèrera un nouvel ordre de lecture.
- Muet : Le bouton permet d'activer ou non le son. Réactiver le son remet le son au volume auquel il était.
- Barre de volume : Modifier le volume de la lecture. Si le nouveau son n'est pas 0, l'option muet est désactivée.
Les réglages sont enregistrés dans le localStorage afin d'améliorer le confort de l'utilisateur.
L'application répond pleinement aux exigences de chacune des catégories :
De plus, des balises Open Graph ont été mises en place :
Distribué sous licence MIT.