# 🎧 6: Build a Spotify Music Player with the Composition API (beta!)

Project Goal Build a Spotify music player
What you’ll learn Build an app with the Composition API
Tools you’ll need A modern browser like Chrome (note: do not use Safari for this workshop; it will not work). A free Spotify account (opens new window).
Time needed to complete 1.5 to 3+ hours (don't stress)

# Instructions

# Read over these instructions

Get an idea of where we're headed!

# Get started as a Spotify Developer

Read over the Web Playback SDK Quick Start guide and obtain an Access Token:

Spotify Web Playback SDK Quick Start (opens new window)

💡

Your access token expires after one hour, so you will need to re-request a token every hour! If your app suddenly stops working, try refreshing your token first.

# Pick and commit to your feature requirements for a minimum viable product (MVP)

Ideas include:

  • [ ] Ability to play song
  • [ ] Ability to pause song
  • [ ] Ability to seek previous track
  • [ ] Ability to seek next track
  • [ ] See the name of a song
  • [ ] Disable buttons if player is offline
  • [ ] Alert the user if the player is offline
  • [ ] Make the UI fully accessible

# Open the Codesandbox template

DJ Vixen Spotify Player starter kit (opens new window)

# Augment basic UI

In this Code Sandbox, you're provided with a basic UI that isn't quite done. Some people prefer to start with the UI layer and hook up the data after. Others prefer to fix the UI after the behind-the-scenes is done. The choice is yours! Here, we suggest starting with the UI so you can test for functionality as you go.

💡

Be sure to "time box" this step - it is tempting to spend a long time perfecting the styling, but try to limit yourself to 15 minutes if you can. You can always come back later!

base app

# Create the data layer

This is the hard part, fam!

  • First, read the Web Playback SDK Quick Start and SDK Reference if you haven't already. These can be found at the bottom of this page in the Resources section. (Don't worry, they are pretty short!)

💡

In order for the player to play music, you'll need to open "real" Spotify (in an app or web browser, doesn't matter) and change the device to DJ Vixen once you've successfully connected the player.

  • Work together to fill in the missing functions!

# Add UI finishing touches!

# Challenge

Just kidding. Pat yourself on the back; this was a challenging enough day! 🏆

Okay, still looking for more? Try moving from the Web Playback SDK to the 🥁 full-fledged Spotify Web API (opens new window). Looking for side project or code sample ideas? This is a great API to use!

# Resources

Slides

Vue Vixens

Spotify

Vue Composition API

# Author

Made with ❤️ by Kristin Ruben