Apple musicの背景もやもやを再現したい

はじめに

Apple musicを普段から使われている方はご存知かもしれませんが、Apple music(デスクトップアプリ)にてアルバムをクリックすると別ページに遷移して、背景アニメーションを楽しむことができます。
また、アルバムの画像の色と背景がリンクしているので親和性があり、美しいです。

※画像だと、わかりませんが実際はもやもやとアニメーションしていています。

SpotifyのAPIを叩いて再現してみる

今回はspotifyのAPIが無料で使えるとのことだったので、spotifyから適当な曲を取得して背景もやもやを作ってみました。Apple Musicほど美しくはないですが、機能的には似たようなものが作れた気がします。

開発環境 : Next.js 14
ライブラリ : color-thief-react

実際にspotifyのAPIを叩いて曲を取得している箇所は省略します。
今回はアルバム画像をクリック後に、モーダルが開いて曲再生・背景アニメーションするようなUIにしました。

画像から色を抽出する機能については、「color-thief-react」というライブラリを使用しました。
下記にてcolor-thief-reactのデモの動作確認できます。
https://codesandbox.io/p/sandbox/color-thief-react-zh6f8?file=%2Fsrc%2FApp.jsx
Paletteというコンポーネントが用意されており、画像から複数色をカラーコードで取得できます。
取得したカラーコードは、CSSのbackgroundColorプロパティの値に割り当てる関数を準備して、そこに引数として渡すようにしました。

{showModal && (
                <>
                    <div
                        className={styles.modal}
                        style={{
                            background: modalBackground,
                        }}
                    >
                        <iframe src={`https://open.spotify.com/embed/track/${activeTrack?.id}`} width="300" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
                        <button className={styles.closeButton} onClick={() => setShowModal(false)}>
                            閉じる
                        </button>
                    </div>
                    <Palette src={activeTrack?.album.images[0].url} crossOrigin="anonymous" format="hex" colorCount={3}>
                        {({ data, loading }) => {
                            if (!loading && data) {
                                const gradient = `linear-gradient(${gradientAngle}deg, ${data.join(",")})`;
                                // 背景色をセット
                                setModalBackground(gradient);
                            }
                            return null;
                        }}
                    </Palette>
                </>
            )}

gif画像でわかりづらいですが、結果的に下記のような色の抽出・アニメーションになりました。

さいごに

Apple Musicのような美しいもやもやは再現できませんでしたが、自分の興味がある機能を実際に手を動かして作ってみることの楽しさを実感しました。
また、外部APIを初めて使ってみて、さまざまな機能が準備されているので色々といじってみたいと思います。
以上！