Une application Web pour afficher votre chanson en jeu actuellement sur Spotify. Vous permet de sauter des chansons, de jouer / une pause et de aimer / différent. Analyse les illustrations de l'album pour choisir l'arrière-plan et la couleur de premier plan pour correspondre à l'image. Les sondages toutes les deux secondes pour rafraîchir l'affichage pour montrer votre chanson de jeu actuellement. Échelle à la taille de votre affichage à l'aide de la disposition dynamique.
J'ai commencé mon projet en configurant un site de base pour montrer le JSON brut de mes données Spotify à l'aide de Spotripy, une API Spotify open source Python. Plus tard, j'ai écrit un JavaScript pour interroger l'API Spotify toutes les deux secondes pour vérifier les modifications. Si la chanson a changé, la page est actualisée avec les nouvelles informations.
Je calcule la palette de couleurs à l'aide d'une bibliothèque JavaScript appelée Colorthief qui saisit la couleur dominante pour l'arrière-plan, et une couleur alternative contrastée de la palette pour le texte. La couleur du texte n'est pas seulement du noir ou du blanc, mais échantillonne à la place quelques couleurs alternatives pour former une palette entière, et trouve une couleur de cette palette qui contraste avec la couleur d'arrière-plan sélectionnée.
J'utilise des symboles de matériel Google pour les icônes de contrôle de la lecture. Cela permet une mise à l'échelle facile à différentes tailles d'écran sans avoir besoin d'images séparées.
Obtenir la disposition des éléments à l'écran et la mise à l'échelle pour différents écrans était un défi. Je voulais qu'il soit au moins tolérable sur tout, d'un PC avec un écran de paysage, à quelque chose comme un téléphone portable. Ce n'est pas parfait, mais c'est assez solide. De plus, trouver à quel moment le texte doit être blanc au lieu du noir était difficile. Je devais m'assurer que les détails de la chanson seraient facilement lisibles, quelle que soit la chanson à ce moment-là.
Il existe de nombreuses façons différentes de héberger ce WebApp. J'utilise personnellement Fly.io. Vous devrez également configurer une application de développeur Spotify pour obtenir votre ID client Spotify et votre secret client.
Créez un compte de développeur Spotify si vous n'en avez pas et créez une nouvelle application. Vous devrez prendre note de l'ID client et du secret du client. Hébergez le WebApp à l'aide de l'une des 3 options suivantes:
Revenez ensuite au tableau de bord du développeur Spotify et entrez dans l'uri de redirection. Assurez-vous de retirer toutes les barres obliques. Il devrait être fonctionnel!
Il y a des informations supplémentaires sur la définition des variables d'environnement et l'hébergement localement dans un grand commentaire en haut d'App.py.
À l'origine, c'était un projet pour le cours Harvard CS50. Depuis lors, j'ajoute mes propres fonctionnalités. Vous pouvez voir la version CS50 originale dans une branche séparée. Depuis lors, j'ai massivement amélioré l'algorithme de détection des couleurs. Il y a aussi maintenant une branche "Raspi" désignée qui contient des lignes de code supplémentaires pour appeler un serveur Web local pour désactiver l'écran de Raspberry Pi lorsque la musique ne joue pas.
J'ai toujours l'intention de mettre à jour cela pour corriger les bogues avec la détection des couleurs et la mise à l'échelle de l'écran, ainsi que quelques boutons et fonctionnalités de bonus supplémentaires, et plus encore.