Raspberry Pi Spotify Status

ハーバードCS50最終プロジェクト：Spotifyステータス

ビデオデモ：https：//youtu.be/yc1qeze1bso

説明：

Spotifyに現在再生された曲を表示するWebアプリ。曲をスキップしたり、再生/一時停止したり、違っている/違っています。アルバムのアートワークを分析して、画像に合わせて背景と前景の色を選択します。 2秒ごとに投票して、ディスプレイを更新して、現在再生されている曲を表示します。動的レイアウトを使用してディスプレイのサイズにスケールします。

スクリーンショット：

実装：

私は、オープンソースのSpotify Python APIであるSpotipyを利用して、SpotifyデータのRAW JSONを表示するために基本的なサイトを設定することからプロジェクトを開始しました。その後、私は2秒ごとにSpotify APIを投票するためにいくつかのJavaScriptを書き、変更を確認しました。曲が変更された場合、ページは新しい情報で更新されます。

カラーパレットを使用してカラーパレットを計算します。ColorThiefというJavaScriptライブラリを使用して、背景には支配的な色をつかみ、テキストのパレットから対照的な代替色をつかみます。テキストの色は黒または白だけでなく、いくつかの代替色をサンプリングしてパレット全体を形成し、選択した背景色とは対照的なパレットから色を見つけます。

再生コントロールアイコンには、Googleマテリアルシンボルを使用しています。これにより、個別の画像を必要とせずに、異なる画面サイズに簡単にスケーリングできるようになります。

困難と闘争：

画面上の要素の配置を取得し、さまざまなディスプレイのスケーリングが課題でした。ランドスケープ画面のあるPCから携帯電話のようなものまで、少なくとも許容できるようにしたかったのです。完璧ではありませんが、かなりしっかりしています。さらに、どの時点でテキストが黒ではなく白であるべきかを見つけることは困難でした。その瞬間にどの曲が演奏されていても、曲の詳細が簡単に読みやすくなることを確認する必要がありました。

自分でホストする方法：

このWebAppをホストできるさまざまな方法があります。私は個人的にfly.ioを使用しています。また、Spotify Developerアプリケーションを設定して、SpotifyクライアントIDとクライアントの秘密を取得する必要があります。

Spotify開発者アカウントがない場合は、新しいアプリを作成します。クライアントIDとクライアントの秘密に注意する必要があります。次の3つのオプションのいずれかを使用してWebAppをホストします。

fly.io（推奨無料ホスト）を使用するには：

• レポをダウンロードします
• fly.ioアカウントを設定して、新しいアプリを作成します
• アプリのホスト名/アドレスに注意してください
• クライアントID、クライアントシークレット、および環境変数としてURI（WebAppがホストされているアドレス）をリダイレクトするクライアントID、クライアントシークレット、およびリダイレクトURI（これは）Spotipy_Client_id、Spotipy_client_secret、およびSpotipy_redirect_uriとして

地元でのホスティング（デバッグ用）：

• このプロジェクトのPython3と依存関係をコンピューターにインストールします。コンピューターの環境変数を使用して、クライアントID、クライアントシークレット、およびURIをリダイレクトします。リダイレクトURIは、ローカルテストの場合は「http://127.0.0.1:5000」になります。

他の場所でホストするには：

• Python3を実行して環境変数を設定できるものをホストできます。あなたがホストしているアドレスを知っているだけで、それはあなたのリダイレクトURIになります。

次に、Spotify開発者ダッシュボードに戻り、リダイレクトURIを入力します。後続のスラッシュを削除してください。それは機能的でなければなりません！

環境変数の設定と、app.pyの上部にある大きなコメントでローカルにホストすることに関する追加の情報があります。

過去の目標と将来の計画：

もともと、これはハーバードCS50コースのプロジェクトでした。それ以来、私は自分の機能を追加しています。別のブランチに元のCS50バージョンを見ることができます。それ以来、色検出アルゴリズムを大幅に改善しました。また、音楽が再生されていないときにRaspberry Piの画面をオフにするためにローカルWebサーバーを呼び出すための追加のコードを含む指定された「Raspi」ブランチもあります。

これを更新して、色の検出と画面スケーリング、さらにいくつかのボタンとボーナス機能などでバグを修正するつもりです。