This is a simple themed music player based on the Spotify Web API. Authenticated users can see all their Spotify playlists and use the player to play/pause songs, to skip to the previous/next song, and to adjust the music's volume. The implementation is loosely based on Sonny Sangha's Spotify Clone tutorial, and the design was inspired by an amalgamation of three different Spicetify themes and Hayden Bleasel's Spotify demo.
🔒 Authentication - Login using your own Spotify account
🎸 No Authentication - Alternatively, you have access to a stripped-down version of the app without authentication
🎶 Playlists – View all of your Spotify playlists and songs
🎧 Preview Song - Play a 30-second preview of a song when hovering your mouse over the song
⏯️ Custom Player – See currently playing song, play/pause song, skip to next/previous song, and adjust volume
📱 Responsiveness – The app is responsive to all screen sizes
This project was setup with Create T3 App and deployed on Vercel.
There are two ways to access this project, Preview and Full.
With the Preview method, you will have limited access to the project and the Spotify API. You will only have access to one playlist (one of my own), and you will only be able to play a 30-second preview of every song. A Spotify Premium account is not required. This method is for users who simply want to get a rough idea of the features of this project without having to do any setup.
With the Full method, you will have access to all the features available in this project. You will be able to view playlists from your own Spotify account, and you will be able to play songs for the entirety of its duration. Most of the features used in this project that are provided by the Spotify API are available only to premium members of Spotify. As a result, this method requires Spotify Premium.
To access this method, simply go to the website and click on "See Preview".
- Go to the Dashboard page at the Spotify Developer website and login using your Spotify account.
- Once logged in, create a new app by clicking on "Create an App". Fill in the prompt however you like and click "Create".
- Click on "Edit Settings", and add
http://localhost:3000/api/auth/callback/spotifyto the "Redirect URIs" section. Click "Save" to save your changes. - Take note of the Client ID and the Client Secret.
git clone https://github.com/ntonioibarrola/spotify-music-player.git
cd spotify-music-playerNEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=123
SPOTIFY_CLIENT_ID= # Replace with Client ID provided in step 1
SPOTIFY_CLIENT_SECRET= # Replace with Client Secret provided in step 1
# Should look similar to this:
# SPOTIFY_CLIENT_ID=55520ed37c70a8174d29cb9390d08d30
# SPOTIFY_CLIENT_SECRET=55520ed37c70a8174d29cb9390d08d30npm install
npm run dev # Open http://localhost:3000 in your browser- Go to
http://localhost:3000in your browser. - Click on "Login with Spotify" and login using your Spotify account.
- You should now have access to my app!
- Note: Please have a Spotify app (desktop or browser) running in the background. For more information, go to Limitations.
As mentioned earlier, many of the services provided by Spotify API are available only to premium members. This means that in order to have the Full experience of this project, a Spotify Premium account is required.
Moreover, music is streamed from an authenticated user's Spotify device and not from this project — this project acts more like a remote control to an open Spotify device. This means that a running Spotify application (desktop or browser) is required in the background. If this behavior is not as expected, please take a look at the Spotify Web Playback SDK for developing websites that can stream music as its own Spotify device.
Most modern browsers employ strict autoplay policies to provide more control for users in deciding what can be played automatically, and to prevent any unexpected media playback from surprising users upon visiting a site. For this project, these policies automatically mute the on-mouse-hover song previews when first entering the site. Most autoplay policies require some kind of user interaction (click, tap, etc.) to allow autoplay with sound. The workaround is to include a popup modal in which the user is required to click in order to close. Consequently, this would mean that this modal would pop up every time the user first enters the page, including page refreshes.
- Spotify Web API Documentation
- Sonny Sangha's Spotify Clone Tutorial
- Spicetify Themes
- Spicetify Dribbblish Theme
- Spicetify Ziro Theme
- Spicetify Turntable Theme
- Hayden Bleasel's Spotify Preview Demo
- Othneil Drew's Best README Template
- Hero Icons
- Autoplay Policies for Chrome
- Autoplay Policies for Chrome and Safari