How I Made a Simple Spotify Widget to Embed Music on Any Page

I tend to over complicate things when it comes to building things. If I want to build something my first instinct is to build version 4 instead of version 1. Before shipping the code I'll ask myself things like "will this scale?" or "are all of the SEO tags perfect?" when in reality shipping version 1 is the only thing that matters. It's exteremly unlikely that any version is going to be perfect, so why not ship and iterate versus waiting for perfection? This is a pretty common trap for most developers as we know what the product could be versus what it is now.

When I wanted to be able to embed music into my blog, I tried to keep the overbuilding trap in mind. Music is a really important part of my life and I thought it would be cool to know what the writer was listening to when they wrote a post. It was partly inspired by Myspace and Xanga, where music was showcased on either your profile or posts. I liked the idea of being able to let people know why I liked a song or why it reminded me of a photo I shot or a post I wrote.

What can I say, I'm a sucker for nostalgia? 😆

I had obviously seen the embedded Spotify buttons around the web. I wanted to put my own flair on it where the embed could be hidden easier and wouldn't have to necessarily impede on the flow of a post. I challenged myself to ship it fast, keep it simple, and write as little code as possible. To really keep myself honest, I gave myself a time restriction of 3 hours, even though I ended up breaking this by just a bit. Next, I wrote down what was important to me for this feature:

• It had to be responsive (Spotify's button was only to a certain extent)
• It had to not be in the way of the content
• I wanted to be able to add a blurb about why I chose that song/playlist to give the song context

Leveraging the Spotify Play Button

To get started I immediately broke my rule of moving fast and went to the API docs. Luckily, after generating a token and reading through the docs I noticed that I had already burned through 25 minutes of my time restriction. I quickly stopped and went back to see if there were any faster ways. I went back to the play button and thought it could be an easy way to leverage the functionality of the Spotify API without having to authenticate via an API.

It turns out, if you embed the widget within your own container, you can have a little more control with what the widget will look like size wise. Colors and the data itself are still controlled by Spotify, but at least you can alter the container and width of the widget itself. After playing for a bit, here is the initial container wrap I came up with. It was very simple but I figured I could add more as I went. 

    <div class="spotify-embed-block">
  <iframe src="https://open.spotify.com/embed?uri=spotify:track:19RV3EkvLt39bWSZwsiGjy&theme=white" width="300" height="300" frameborder="0" allowtransparency="true"></iframe>
</div>

Making the play button responsive

My first challenge was to make something that could be useful on both desktop and mobile. Given that the Spotify widget comes back as an iframe, I knew it would be a challenge. I started testing out trying to resize the iframe with the wrapper I created above. After some trial and error I discovered the following:

• The min height for the large player was ~250px high
• It was pretty easy to select the widget iframe and resize it how I wanted. I couldn't control anything inside of the iframe, but could at least make it fit how I wanted.
• A good size for the more minimal player was ~80px high
• The default height of 80px could work great on mobile

I then started testing out media queries to resize the wrapper for different screen sizes. What I ended up with was keeping a default width of 300px on tablet and above and then resizing to 100% width on smaller screen sizes. This ensured that it would fit the entire screen on other screens and wouldn't be too large on desktop computers. If I wanted to make it a bit more responsive-friendly, I could use rem for sizing, which I may do in the future. Here was my code at this point.

    .spotify-embed-block{
  height: 250px;
  width: 300px;
  color: #fff;
  background: #283c86;
  background: -webkit-linear-gradient(to left, rgba(69,162,71,0.7), rgba(40,60,134,0.7));
  background: linear-gradient(to left, rgba(69,162,71,0.7), rgba(40,60,134,0.7))
  }
  @media only screen and (max-width:  479px),only screen and (max-width:  768px){
    .spotify-embed-block{
      width: 100%;
      height: 80px
      }
    .spotify-embed-block iframe{
      width: 100%;
      height: 80px
      }
  }

Keeping the widget out of the way

One of the next challenges was to keep the widget out of the way. I wanted it to stick with the page as you scrolled, but not be in the way so it took away from the content of the page itself. To do this I decided to go with creating a toggleable dock that would live at the bottom of the page. This required me adding some jQuery and adding to my existing HTML structure. 

The end product essentially had me listening for a click on my new HTML element and animating it. I am not normally a huge fan of JS animations performance wise, but this one was simple enough that I went with it. One interesting new feature I learned was being able to fire different functions based on window width. The dock needed to toggle to different heights based on screen width so that was a fun little tidbit I learned while building this. 

For those that are interested, here was the simple jQuery function that runs the whole widget. Not super elegant, but it gets the job done and is easily changeable/readable by other devs.

    $('.spotify-embed-close').on('click', function() {
	if($('.spotify-embed-block').is(':hidden') && $(window).width() > 768){
		$('.spotify-embed-close').animate({
			bottom: 250
		}, 400);
		var top_text = 'Hide <i class="fa fa-angle-down">'
		$('.close-text').empty().append(top_text);
	} else if($('.spotify-embed-block').is(':hidden') && $(window).width() <= 768){
		$('.spotify-embed-close').animate({
			bottom: 80
		}, 400);
		var top_text = 'Hide <i class="fa fa-angle-down">'
		$('.close-text').empty().append(top_text);
	}
	else {
		$('.spotify-embed-close').animate({
			bottom: 0
		}, 400);
		var bottom_text = '<i class="fa fa-music">'
		$('.close-text').empty().append(bottom_text);
	}
	$('.spotify-embed-block').slideToggle();
});

Adding my own flair

Now comes the fun part. Like I said previously, I wanted to be able to give some context why I chose that song. To do this I ended up having to have different sizes of widgets. This blog runs on Wagtail CMS and I created a custom StreamField block where I could choose between a large and small player. A large player means that standard size player that is better for embedding playlists/albums and the smaller player allowed me to add a blurb to any song I was embedding. The structure was still very simple, but now instead I had to use Django/Wagtail template tags to load the right portion of the template based on what size widget I selected.

If you are wanting to do this with something like WordPress or other blogging platforms, I am sure you can use a shortcode or something similar based on your CMS of choice. 

---

After that, I was ready to launch. If you check out the bottom right of this page you can see the widget in action 🎵. Let me know what you think of the song!

Want to see the code? It's up on GitHub here.