Currently Playing Spotify Web API

currently-playing-spotify-web-api.markdown

Currently Playing Spotify Web API

A Pen by Uvacoder on CodePen.

License.

index.html

<h1>Spotify Currently Playing Web API</h1>

 

<div class="container">
  <div class="row">
  <div class="col-md-8 offset-md-2">
    <p style='text-align:center'>Due to Spotify API keys lasting only 60mins unless a refresh token is set up, if it is not working, sign into <a href="https://developer.spotify.com/" target="_blank">developer.spotify.com</a> and get an oAuth token from <a href="https://developer.spotify.com/console/get-users-currently-playing-track/"target="_blank">here</a> and replace the accessToken variable to see it working.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">
    <div class="nowPlayingBox">
      <div class="row">
        <div class="col-md-4">
      <div id="trackArtwork"></div>
        </div>
        <div class="col-md-8">
      <div class="trackInfo">
         <p id="trackName"></p>
          <p id="artist"></p>
      </div>
        </div>
      </div>
  </div>
    </div>
  </div>
</div>

script.js

//If it is not working, sign into developer.spotify.com and get an oAuth token from here https://developer.spotify.com/console/get-users-currently-playing-track/ 

//then just replace the accessToken variable below

var accessToken = "ACCESS TOKEN HERE";

$.ajax({
  type: "GET",
  url: "https://api.spotify.com/v1/me/player/currently-playing?market=ES",
  headers: {
     'Authorization' : 'Bearer ' + accessToken
  },
  success: function(data) {
    console.log(data);
    console.log(data.item.name);
    console.log(data.item.artists[0].name);

   var artwork = data.item.album.images[1].url;
    var trackName = data.item.name;
    var artistName = data.item.artists[0].name;
    
    var artworkID = document.getElementById('trackArtwork');
    var track = document.getElementById('trackName');
    var artist = document.getElementById('artist');
    
 artworkID.innerHTML = '<img src=' + artwork + '>';
   track.textContent = trackName;
   artist.textContent = 'By ' + artistName;

  
  
  },
  dataType: "json"
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

body {
  background: #1DB954;
   font-family:"Quicksand";
  color:#fff;
}

a {
  color:#333;
}

h1 {
  font-family: "Quicksand";
  color: #FFF;
  text-align:center;
  padding:35px 0;
}

.nowPlayingBox {
  background:rgba(0,0,0,0.2);
  height:auto;
    padding:30px;
  box-sizing:border-box;
}

#trackArtwork {
}
#trackArtwork img {
  border-radius:50%;
   -webkit-animation: rotating 5s linear infinite;
  -moz-animation: rotating 5s linear infinite;
  -ms-animation: rotating 5s linear infinite;
  -o-animation: rotating 5s linear infinite;
  animation: rotating 5s linear infinite;
  width:100%;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#trackName,
#artist {
  color:#fff;
}

#trackName {
  font-size:2em;
  font-weight:300
}

styles

<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />