NowPlaying for Spotify
v2.1 - Mini player
Il s'agit d'un visualiseur Spotify Connect à mise à jour en temps réel, qui a fait fabriquer sa base de code de base en une demi-journée.
Ce projet est concédé sous licence GNU GPL-3.0.
Disponible sur nowPlayi.ng
Mini-générateur de joueurs
Page d'état
v2.0.x
- Use of localStorage
- Added GNU GPL-3.0 license
- Updated Index page design
- Updated French and English sentences
- Compatibility with Dark Reader
- Better UI consistency / CSS tweaks
- More languages
- .env support (thanks @finnie2006!)
- Added playback support (Premium account should be needed)
- Added playback information
- Added pause button (#17)
- CSS improvements added for better responsive (#15 #16)
- SEO improvements (#16)
- Minor CSS improvements
- Advertisements are recognized
- Multiple artists are recognized
- Experimental theme switcher
- Now playing device name and type is showing
- Cursor is hidden after a couple of seconds
- Fullscreen button
HTML, Tailwindcss, JS / Alpinejs, PHP
API Web Spotify PHP par Jwilsson pour obtenir le jeton et actualiser le jeton, Spotify Web API JS par JMperez pour récupérer et afficher la chanson actuellement en jeu
Vous pouvez utiliser XAMPP (multi-plate-forme) ou Wampserver (Windows uniquement), mais tout serveur Web avec PHP 7.0 ou plus est bon à utiliser, avec le module php-curl .
!!! Si vous êtes sur Nginx, vous devez l'ajouter à votre configuration, sinon votre .env sera exposé à Internet !!!
location /.env {
allow [YourIP]; # Allow your IP if you want to, if not delete this line.
deny all;
}
Vous devriez avoir une application déclarée dans le tableau de bord du développeur de Spotify pour obtenir un Client ID .
Comment faire ceci: comme je l'ai dit, la première chose est de créer un ID client ( Create a Client ID ) sur le tableau de bord du développeur de Spotify. Tapez le nom de votre application dans le champ de texte App or Hardware name , et sa description sur l' App or Hardware description . Dans le What are you building ? Section, indiquez la plate-forme pour laquelle vous construisez l'application, puis cliquez sur le bouton NEXT . Répondez à la question de l'intégration commerciale et continuez. Si nécessaire, remplissez le formulaire et cochez toutes les cases au 3ème étape et vous êtes prêt à partir. Votre application est déclarée dans le tableau de bord du développeur de Spotify!
Maintenant que vous avez votre application, vous avez des modifications à faire dans un seul fichier: .env . (S'il n'existe pas, copiez example.env à .env )
Modifiez ces valeurs:
YOUR_CLIENT_ID par votre identifiant client disponible sur le panneau de votre application,YOUR_CLIENT_SECRET par votre Client Secret disponible en cliquant sur le bouton Show Client Secret situé sur la même page Web que votre identifiant client,YOUR_DOMAIN par votre URL de redirection, dans le cas d'un hébergement local, le remplacez par http://localhost/token.php dans la plupart des cas. Basicaly, c'est l'URL accessible pour la page token.php . Revenons sur le panneau de notre application. Vous devez déclarer l'URL où se trouve la page token.php , pour un hébergement local, ce serait dans la plupart des cas http://localhost/token.php . Cliquez sur le bouton Green Edit settings situés en haut de la page, puis dans le champ de texte Redirect URIs , indiquez le vôtre. Attention : ce que vous avez tapé devrait impérativement être le même que ce que vous avez écrit dans les deux fichiers précédents! Cliquez ensuite sur le bouton SAVE en bas du formulaire. Votre application est déclarée et prête à l'emploi!
Vous pouvez inclure un script d'analyse facultatif, en utilisant la variable d'environnement ANALYTICS_SCRIPT .
S'il est défini, cette variable sera incluse dans la partie <head> de toutes les pages. Cette variable devrait très probablement être une chaîne contenant une balise <script> .
Flags de Freepik du site Web www.flacon.com sous Creative Commons By 3.0.
