Replace your Spotify album artwork with an animated version.

Overview

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")
);
  1. 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
  1. 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

You might also like...

A review aggregator web application that allows users to review albums by leveraging the Spotify Web API.

A review aggregator web application that allows users to review albums by leveraging the Spotify Web API.

Reviewify Summary Reviewify is a review aggregator platform that leverages the Spotify Web API. It allows users to: Login with their Spotify accounts

Oct 7, 2022

now-playing: A website to show what I'm currently listening to on Spotify Run on Repl.it

 now-playing: A website to show what I'm currently listening to on Spotify Run on Repl.it

now-playing: A website to show what I'm currently listening to on Spotify ❓ How does it work? This project is split into two parts - the frontend and

Apr 29, 2022

Edit CSS directly from Spotify.

Edit CSS directly from Spotify.

Spotify CSS Editor Built with Spicetify Creator. Download from Spicetify Marketplace. Edit CSS directly from Spotify. Features Edit CSS directly from

Dec 27, 2022

Spotify Web API with Next.js

Resumo Statsfy é um site que exibe seus artistas e músicas mais escutadas, além de músicas recentes. Você pode usar clicando neste link. (Apenas usuár

Sep 5, 2022

Spotify Radio - JS Expert Week 6.0

Spotify Radio - JS Expert Week 6.0

Spotify Radio - JS Expert Week 6.0 Welcome to the sixth Javascript Expert Week. This is the starting code to start our journey. Tag this project with

Mar 16, 2022

Pomodoro + spotify + todo list = awesome!

Turborepo starter This is an official Yarn v1 starter turborepo. What's inside? This turborepo uses Yarn as a package manager. It includes the followi

Jan 3, 2023

Spotify radio is an audio streaming app where you can add effects in real time.

Spotify radio is an audio streaming app where you can add effects in real time.

Spotify Radio - Semana JS Expert 6.0 Spotify radio is an audio streaming app where you can add effects in real time. JS-Expert Project of the Week by

Apr 25, 2022

Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify

Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify, apple music support . You can save your songs and play it. It also has DJ mode system.

Dec 25, 2022

Todas as aulas da Semana JS Expert 6.0 - Spotify Radio

 Todas as aulas da Semana JS Expert 6.0 - Spotify Radio

Spotify Radio - Semana JS Expert 6.0 Seja bem vindo(a) à sexta Semana Javascript Expert. Este é o código inicial para iniciar nossa jornada. Marque es

Jan 7, 2023
Releases(v1.0.0)
Owner
qier222
qier222
Spotify clone using Next.js, Spotify API, Tailwind, NextAuth, Recoil

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind

Abdelwahab Hussein 2 Dec 25, 2021
spotify.ts is an wrapper built around Spotify's Web API

spotify.ts About spotify.ts is an wrapper built around Spotify's Web API. Features Fast Object Oriented Typescript, ESM, CJS support Easy to Use Insta

null 6 Nov 17, 2022
Add some fire to your Spotify music playlists 🔥🎧

Spotifire ?? Add some fire to your Spotify music playlists ?? Built With Next.js React Tailwind CSS (v3.0) NextAuth Recoil Spotify Web API Preview Vis

Niloy Sikdar 15 Jun 19, 2022
SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

Sahil Saha 9 Dec 31, 2022
Randomfy takes your most listened Spotify artists

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists, so you can meet new artists based on the previous selected one.

Raul Andrade 9 Nov 6, 2022
update your twitter banner with the song you're currently playing on Spotify

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dunsin 4 Oct 17, 2022
Animated Discord Status For Call of Duty Cold War Modders.

Coldwar Modder Status Animate your custom status for advertising your Coldwar Modded Lobbies. DISCLAIMER I am not responsible for any bans resulting i

᲼ 4 Jun 1, 2021
A simple package to download music tracks from spotify 🎵

A simple package to download music tracks from spotify ??

Alen Yohannan 26 Dec 25, 2022
Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Yohan Hmaiti 2 Jan 8, 2022
SpotifyUiClone - A Ui Clone of Spotify, only studing purporses

Spotify Ui Clone An Kinda Clone of the Spotify Ui for studing purposes Summary This is a project made in React Js, so the idea is to make an ui for an

Jf_Dess 1 Jan 7, 2022