jQuery Plugin To Display Recent Tracks From Last.fm - Juke.js

jQuery Juke.js is a responsive animated Last.fm widget that allows to display any user's tracks from Last.pm using Ajax request. All the tracks are playable via Spotify Player. jQuery Velocity.js is required for the subtle animations.

How to use it:

1. Include the necessary jQuery library together with juke.js and velocity.js at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.velocity/0.3.0/jquery.velocity.min.js"></script> 
<script src="juke.js"></script>

2. Create a container for the Last.fm widget and pass the options via juke-* attributes.

• juke-method: Method, list of methods available here: http://www.last.fm/api
• juke-limit: The number of results to return (by default, the height of the player is restricted to a multiple of the height of one track)
• juke-rows
• juke-user: User to search by (if necessary)

<div class="juke"
     juke-method="user.getrecenttracks"
     juke-limit="15"
     juke-rows="6"
     juke-user="LAST.FM USERNAME">
</div>

3. The required CSS to style the last.fm widget. Tweak or override the CSS styles whatever you feel like.

.player {
  border-radius: 0 !important;
  border: none !important;
}

.column {
  width: 25%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  float: left;
  text-decoration: none;
}

.columns { height: auto; }

.juke-header {
  background-color: #fff;
  height: 30px;
  list-style: none outside none;
  text-align: center;
  text-transform: lowercase;
}

.juke-header li p { margin: 0; }

.music_player {
  display: inline-block;
  opacity: 1;
  width: 75% !important;
  height: inherit;
  z-index: 20;
  float: right;
  vertical-align: top;
}

.track:nth-child(even) .track_info { background-color: white !important; }

.juke {
  overflow-y: scroll;
  margin-bottom: 2em;
  border-radius: 3px;
}

.juke .track {
  background-color: #ECF0F1;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  height: 80px;
  position: relative;
  height: 80px;
}

.juke .track h3 {
  font-family: "soleil", sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  margin: 0;
  opacity: 0;
  text-align: center;
  position: relative;
  top: 50%;
  margin-top: -12px;
  color: white;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}

.juke .track .track_info {
  opacity: 1 !important;
  width: 25%;
  height: inherit;
  display: inline-block;
  vertical-align: top;
  text-transform: capitalize;
  padding: 0em 8px;
}

.juke .track.spotiplay h3 { opacity: 1; }

.juke .track.spotipause .track_info {
  opacity: 1 !important;
  width: 25%;
  height: inherit;
  display: inline-block;
  vertical-align: top;
}

.juke .track .art {
  height: 80px;
  width: 25%;
  background-color: #ECF0F1;
}

.juke .track p,
.juke .track div {
  display: inline-block;
  vertical-align: top;
}

.juke .track .track_info {
  background-color: #ECF0F1;
  height: inherit;
  width: 25%;/* Vertical aligning like a #BADA55 */
}

.juke .track .track_info p {
  color: #555;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  width: 100%;
  height: 80px;
  line-height: normal;
  margin: 0;
  padding: 1.2em 0em;
}

.juke .track .track_info p:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

4. Replace the Last.fm API key with yours in the juke.js.

var api_key = "YOUR API KEY"; // Last.fm API key

---

This awesome jQuery plugin is developed by AtomLab. For more Advanced Usages, please check the demo page or visit the official website.