Spotify Animated Album Artwork

Replace your Spotify album artwork with an animated version.

preview.mp4

Install

_{My english is broken, please bear with it... 😰}

1. Install spicetify-cli
2. Download the spotify-animated-album-artwork.js from GitHub Releases.
3. Use the following command to install this spicetify extension, for more info visit: spicetify docs

spicetify config extensions spotify-animated-album-artwork.js
spicetify apply

FAQ

Q: Where are those animated album artworks from?
A: Apple Music.

Q: Why did this api take so long to respond?

Deploy to server

Requirements:

• Server
• Domain
• Apple ID
• Supabase database

Download source code

git clone https://github.com/qier222/spotify-animated-album-artwork.git

Install Node.js and dependencies

Install PNPM

curl -fsSL https://get.pnpm.io/install.sh | sh -
source ~/.bashrc

Use PNPM to install Nodejs

pnpm env use --global lts

Install dependencies

pnpm install

Create config file

Copy config.example.json file in the project root and rename it to config.json

Write your domain name in the api field.

Get Apple Music token

1. Go to Apple Music and login with your Apple ID
2. Open browser developer tools (F12 or CMD+SHIFT+I), click on the Network tab, then click on the Fetch/XHR option
3. Go to https://music.apple.com/cn/search?term=taylor%20swift
4. Find authorization in Request Headers and copy it (looks like 'Bearer xxxxxxx'), this is your token
5. Paste token into config.json

Setup Supabase

1. Register a new Supabase account
2. Create a new project
3. Go to Supabase's "SQL Editor", paste the following code into the editor and click run

CREATE TABLE "public"."spotify" (
    "id" text NOT NULL,
    "appleMusicID" int8 NOT NULL,
    "url" text,
    "downloaded" bool DEFAULT false,
    "created_at" timestamptz DEFAULT now(),
    PRIMARY KEY ("id")
);

4. Go to Supabase's "Settings" - "API", copy your project's URL and service_role secret into the config.json file

Download FFmpeg

1. Open FFmpeg and download the latest release version,
2. Put it under the project root , use tar to unpack it, rename the unpacked folder to ffmpeg

tar -xf ffmpeg-release-amd64-static.tar.xz

3. Make sure your FFmpeg version is higher than 5.0.0, you can check it by running ./ffmpeg/ffmpeg -version

Start the server

Simply run

node server.js

If you want to make sure that the server is always running, you can run pm2 to manage it.

pm2 start server.js --name spotify-animated-artwork-server

Start you caddy server to reverse proxy and use https

Copy Caddydile.example to Caddyfile and replace https://your-domain.example.com with your domain.

If you are using Cloudflare to manager your domain DNS, replace your_cloudflare_api_key with your Cloudflare api key. Otherwise, checkout Caddy Documentation for other ways to enable HTTPS.

Note: HTTPS is needed for this api to work.

caddy start --config Caddyfile

Develop

You need to run this command every time you want to make changes effecting Spotify (probably).

npm run build && spicetify apply --enable-developer-mode

Enable developer mode to open console, deactivate every time you close Spotify.

spicetify enable-devtools --enable-developer-mode

Made with Spicetify Creator

• https://github.com/spicetify/spicetify-creator