NowPlaying for Spotify
v2.1 - Mini player
Dies ist eine Echtzeit-Aktualisierung von Spotify Connect Visualizer, bei dem die Basis-Codebasis an einem halben Tag erstellt wurde.
Dieses Projekt ist unter GNU GPL-3.0-Lizenz lizenziert.
Erhältlich bei nowplayi.ng
Mini -Spielergenerator
Statusseite
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
Spotify Web API PHP von Jwilsson, um das Token und den Aktualisieren von Token, Spotify Web API JS von JMPerez zu erhalten, um das aktuell spielende Lied abzurufen und anzuzeigen
Sie können XAMPP (Multi-Plattform) oder WampServer (nur Windows) verwenden, aber jeder Webserver mit PHP 7.0 oder höher ist mit dem php-curl -Modul gut zu verwenden.
!!! Wenn Sie auf Nginx sind, müssen Sie dies Ihrer Konfiguration hinzufügen, sonst wird Ihr .EnV dem Internet ausgesetzt !!!
location /.env {
allow [YourIP]; # Allow your IP if you want to, if not delete this line.
deny all;
}
Sie sollten eine deklarierte App im Entwickler -Dashboard von Spotify haben, um eine Client ID zu erhalten.
Wie dies geht: Wie ich bereits sagte, ist das erste, was eine Client -ID ( Create a Client ID ) auf dem Entwickler -Dashboard von Spotify erstellen. Geben Sie den Namen Ihrer App in das Feld App or Hardware name und der Beschreibung der App or Hardware description des Textfelds ein. What are you building ? Abschnitt geben Sie die Plattform an, für die Sie die App erstellen, und klicken Sie dann auf die NEXT Schaltfläche. Antwort auf die kommerzielle Integrationsfrage und fahren Sie fort. Füllen Sie bei Bedarf das Formular aus und überprüfen Sie alle Kästchen in der 3. Stufe, und Sie sind bereit zu gehen. Ihre App wird in Spotify's Developer Dashboard deklariert!
Nachdem Sie Ihre App haben, müssen Sie einige Änderungen in einer Datei vornehmen: .env . (Wenn es nicht existiert, kopieren Sie example.env nach .env )
Bearbeiten Sie diese Werte:
YOUR_CLIENT_ID nach Ihrer Client -ID im Bereich Ihrer App verfügbar.YOUR_CLIENT_SECRET nach Ihrem Client Secret verfügbar, indem Sie auf die Schaltfläche Show Client Secret auf derselben Webseite wie Ihre Client -ID klicken.YOUR_DOMAIN durch Ihre Umleitungs -URL, im Fall eines lokalen Hosting, ersetzen Sie es in den meisten Fällen durch http://localhost/token.php . Basic, es ist die zugängliche URL für die Seite token.php . Gehen wir wieder in das Panel unserer App. Sie müssen die URL deklarieren, wo sich die Seite token.php befindet, für ein lokales Hosting in den meisten Fällen http://localhost/token.php . Klicken Sie oben auf der Seite auf die Schaltfläche Green Edit settings und geben Sie im Feld Redirect URIs -Text auf Ihre an. ACHTUNG : Was Sie eingeben, sollte imperativ das gleiche sein wie das, was Sie in den beiden Präzedenzfällen geschrieben haben! Klicken Sie dann ganz unten im Formular auf die Schaltfläche SAVE . Ihre App ist deklariert und bereit zu verwenden!
Sie können ein optionales Analyse -Skript mit der Variablen ANALYTICS_SCRIPT einfügen.
Wenn festgelegt, wird diese Variable in den <head> aller Seiten aufgenommen. Diese Variable sollte höchstwahrscheinlich eine Zeichenfolge sein, die ein <script> -Tag enthält.
Flaggen von Freepik von der Website www.flaticon.com unter Creative Commons von 3.0 Lizenz.
