NowPlaying for Spotify
v2.1 - Mini player
これは、半日でベースコードベースを作成したリアルタイムの更新Spotify Connect Visualizerです。
このプロジェクトは、GNU GPL-3.0ライセンスの下でライセンスされています。
nowplayi.ngで入手可能
ミニプレーヤージェネレーター
ステータスページ
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
JwilssonによるSpotify Web API PHPトークンと更新トークンを取得し、JMPEREZによるSpotify Web API JS
XAMPP（Multi-Platform）またはWampServer（Windowsのみ）を使用できますが、PHP 7.0以上のWebサーバーは、 php-curlモジュールで使用するのに適しています。
!!! nginxを使用している場合は、これを構成に追加する必要があります。そうしないと、.envがインターネットにさらされます!!!
location /.env {
allow [YourIP]; # Allow your IP if you want to, if not delete this line.
deny all;
}
Client IDを取得するには、Spotifyの開発者ダッシュボードに宣言されたアプリが必要です。
これを行う方法：私が言ったように、最初のことは、Spotifyの開発者ダッシュボードにクライアントID（ Create a Client ID ）を作成することです。 App or Hardware nameテキストフィールドにアプリの名前と、 App or Hardware descriptionテキストフィールドにその説明を入力します。 What are you building ?セクションでは、アプリを構築しているプラットフォームを示し、 NEXTボタンをクリックします。商業統合の質問に答え、続行します。必要に応じて、フォームに記入し、3番目の段階ですべてのボックスを確認すると、準備ができています。アプリはSpotifyの開発者ダッシュボードで宣言されています！
アプリができたので、1つのファイルで変更するいくつかの変更があります： .env 。 （存在しない場合は、 example.envに.envをコピーします）
それらの値を編集します：
YOUR_CLIENT_ID 、Show Client Secretボタンをクリックすることにより、 Client SecretによるYOUR_CLIENT_SECRET 、YOUR_DOMAIN 、ローカルホスティングの場合、ほとんどの場合http://localhost/token.phpに置き換えます。 Basicaly、 token.phpページのアクセス可能なURLです。アプリのパネルに戻りましょう。 token.phpページがあるURLを宣言する必要があります。ほとんどの場合、ローカルホスティングについてはhttp://localhost/token.phpです。ページの上部にあるグリーンEdit settingsボタンをクリックしてから、 Redirect URIsテキストフィールドで表示します。注意：入力したものは、2つの先例のファイルに書いたものと同じであるはずです！次に、フォームの最下部にあるSAVEボタンをクリックします。あなたのアプリは宣言され、使用する準備ができています！
ANALYTICS_SCRIPT環境変数を使用して、オプションの分析スクリプトを含めることができます。
設定されている場合、この変数はすべてのページの<head>の一部に含まれます。この変数は、おそらく<script>タグを含む文字列である必要があります。
www.flaticon.comのFreepikによるフラグは、3.0ライセンスでCreative Commonsの下にあります。
