Adding music or sound on your web pages is a great way to spice up your website. And you can simply embed songs on the site from popular streaming platforms such as Spotify. Spotify provides millions of songs, playlists, albums, artists, podcasts or episodes for people all over the world. You can easily access to them whether you're a free or premium account.
If you want to embed songs from Spotify on your website but don't know how, you're in the right place. Here I'll walk you through how to embed a Spotify playlist on blog or website with step-by-step instructions.
Part 1. FAQs about Embed Spotify Playlist
#1. What does Embed Playlist mean on Spotify?
Before going further, let's have a clear understanding of embedding. Embedding means the integration of audios, videos, gifs, links, images, or other content from third-party platforms such as Spotify, YouTube, etc. into your website or blog. And it definitely looks much better than just a link. In other words, if you want embed audio from Spotify to your site, you only need to add a Spotify Play Button, a sleek, embeddable, little player, to your website. All your visitors have to do is to hit the "Play" icon to enjoy the track on your site, without going away from the page to the Spotify's app.
#2. What does "Copy Embed Code" mean on Spotify?
By clicking on the 'Copy Embed Code', it means that you've taken a piece of HTML code from Spotify. Spotify provides you some embed code customized with the audio you want. You can simply click a button to copy that code automatically, and then put it on your own website that supports Spotify iframe. If you want to embed an audio, video or other third-party widget on your site, you can do it.
#3. How to customize the look of the music player?
The default large size of the player is 300*380, and compact size is 300*80. If you don't like it, you can edit the width and height code (width="xxx" height="xxx") with appropriate number such as 650*380.
The default position is left-justified. You can also put the player at the center of the page by adding the right code, such as 'style="text-align:center"'.
Part 2. How to Embed a Spotify Playlist on Your Website
Fortunately, you're allowed to embed a single song or entire albums, playlists that you want to share. Next up, we will show you how to embed Spotify music on your site.
2.1 Guide: Embed a Spotify Playlist
Step 1. Launch the Spotify app on your computer and sign in your account with right username and passcode.
Step 2. Browse and find the song or playlist that you want to embed on the site, right-click and select Share > Embed playlist.
Step 3. Spotify will open the Embed playlist window for you to customize the look of the embed playlist. Or you can choose to click the COPY button to copy the code to your callboard. You can check the "Show code" option to the left of the COPY button to view the code.
Step 4. Now go back to your site and paste the code on your blog or website in the HTML editor. Save and done! You can embed Spotify playlists on any website that supports Spotify iframe tags.
Preview:
The following is the code I copied from Spotify and then pasted it here for your reference. You can now easily listen to Spotify playlist on ViWizard website. Enjoy it!
2.2 Tips: Customize a Embed Spotify Playlist
In the FAQs of this post, we briefly introduce how to customize the look and feel of the music player/embed Spotify playlist. You can benefit to the tops here we'd like to share.
Tip 1. How to change the color of a embed Spotify playlist?
Step 1. Open the Spotify app for desktop to right-click the desired playlist in the side menu, and then select > Share > Embed playlist.
Step 2. In the "Embed playlist" pop-up, select 1 color between 2 available colors . The colors here are extracted from the cover of the playlist.
Step 3. Repeat some steps to embed the desired Spotify playlist to your website.
If you want more color selections, you need to change the color of your Spotify playlist.
Tip 2. How to change the cover of a embed Spotify playlist?
Step 1. Open the Spotify desktop app or Spotify Web Player. Go into the playlist you wish to embed to your website.
Step 2. When you're viewing the playlist's profile, click the cover of the playlist in the upper section.
Step 3. In the pop-up, use Finder or Files Explorer to find and open the photo.
Step 4. Once changed, click the Save button to save this change.
Step 5. Repeat some steps to go to the Embed playlist window of the playlist, you'll find the color selection is different than before.
Part 3. How to Embed a Spotify Playlist in Notion
If you have Notion on your Windows PC or MacBook, you can follow these steps to embed a Spotify playlist in it.
Step 1. Repeat the steps in Part 2 of this post to open the Spotify app for desktop or Spotify Web Player to go to the desired playlist > Share > Embed playlist. Copy the embed code for this playlist to your clipboard.
Step 2. On the Windows PC or MacBook, launch the Notion app.
Step 3. Decide the place to embed a Spotify playlist.
Step 4. Type this command: "/em" to select "Embed" from the options list.
Step 5. Notion will open a window for you to paste the code in. Paste the code in the box > Embed link.
Step 6. Now the playlist will appear on the selected position.
Extra Tip: How to Download Spotify Playlist with a Free Account
If you're a fan of Spotify and love to listen to music very much, you're suggested to download Spotify music to MP3 for listening at a go without internet connection. ViWizard Spotify Music Converter is a brilliant tool to help you achieve that. It's well-designed to download music from Spotify no matter you're a free or premium user. Meanwhile, it's able to convert and save Spotify music as more device supported formats like MP3, AAC, WAV, etc. without quality loss. After that, you'll have a great experience to enjoy Spotify music on any player and device as you like.
Why you need ViWizard Spotify Converter?
- Download all Spotify songs and playlists for offline listening
- Convert Spotify to MP3, FLAC, AAC, WAV, and other common formats
- Save Spotify content at a 5x fast speed
- Support various output formats and devices
- Keep lossless audio quality and all ID3 tags
Conclusion
The method to add Spotify playlist to your website is very simple, isn't it? If your website supports Spotify code, you can now have a try! Furthermore, you can also have freedom to customize the Spotify player and make it look better on your site.
Adam Gorden is an experienced writer of ViWizard who is obsessed about tech, movie and software.
