How to trigger music playback using Spotify Web API after clicking tracks

Other Questions Spotify
1

I’m new to working with APIs and having trouble with Spotify’s Web API. I can already search for albums but I can’t figure out how to actually play songs when users click on them.

My current setup:

const APP_ID = "xxxxx"
const APP_SECRET = "xxxxx"

Here’s my main component code:

const [queryInput, setQueryInput] = useState("")
const [authToken, setAuthToken] = useState("")
const [albumList, setAlbumList] = useState([])
const [trackData, setTrackData] = useState([])

useEffect(() => {
  var credentials = {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: `grant_type=client_credentials&client_id=${APP_ID}&client_secret=${APP_SECRET}`
  }
  
  fetch("https://accounts.spotify.com/api/token", credentials)
    .then(response => response.json())
    .then(data => {
      setAuthToken(data.access_token)
    })
    .catch(error => console.log(error))
}, [])

async function performSearch() {
  console.log("Starting search for: " + queryInput)

  var requestHeaders = {
    method: "GET",
    headers: { 
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + authToken
    }
  }
  
  var albumResults = await fetch(`https://api.spotify.com/v1/search?query=${queryInput}&type=album`, requestHeaders)
    .then(response => response.json())
    .then(data => { 
      setAlbumList(data.albums.items)
    })

  // This is where I want to handle track playback
  var playerAPI = await fetch('https://api.spotify.com/v1/me/player')
  setTrackData("Need help with this part")
}

I want to automatically connect to the Spotify player and start playback when someone clicks on a track. I already handle authentication in useEffect so I don’t need a separate login button. The main issue is I don’t understand how to use the player endpoint to actually start playing specific songs. Can someone help me understand the correct way to implement this?

2

Yeah, the authentication headache is real, but there’s a way around all that OAuth and SDK mess.

I ran into this exact problem building music tools. Skip handling Spotify’s complexity yourself - just use Latenode to automate the whole thing.

It handles the OAuth dance, grabs permissions, refreshes tokens, and triggers playback with simple HTTP calls. No SDK nightmares or state management.

Best part? You can add playlist creation or cross-platform sync without touching frontend code. Just send track data to your workflow and it does everything behind the scenes.

Built our office playlist system this way. Users click songs, Latenode processes it and starts playback on the right device. Way cleaner than managing all those moving parts yourself.

3

Hit this exact issue six months ago. You definitely need the auth flow switch, but here’s what everyone’s missing - Spotify needs an active device for playback. Even with perfect auth and scopes, the API returns nothing if no device is connected. I make users open Spotify on their phone or computer first, then my app can see and control it through /v1/me/player/devices. For playback, POST to /v1/me/player/play with the track URI: {“uris”:[“spotify:track:trackid”]}. Authorization code flow’s trickier than client credentials, but Spotify’s docs have solid examples. Don’t forget the device_id parameter if you’re targeting a specific device.

4

hey! just a heads up, the client creds flow doesn’t allow playback. you’ll need to use the authorization code flow with user login to control the player. the client creds only get you public stuff like search, not the playback features.

5

You’ll need the Web Playback SDK for this. After switching to authorization code flow, initialize the SDK with a token that has streaming scope. Create a Spotify.Player instance and make sure it’s connected before sending playback commands. Once it’s connected, use the player’s activateElement method to prep for playback, then make PUT requests to /v1/me/player/play with the track URI in the body. Don’t forget the user-modify-playback-state scope in your token - without it you’ll hit 403 errors. Player initialization takes a few seconds, so handle your loading states properly.