Last.fm javascript API practice

Last.fm javascript API practice

15 46505
Last.fm javascript API practice

Last.fm javascript API practice

Today I would like to give you something new, we have already talked about different social networks like facebook, google or twitter, but we haven’t tried other services, as example – musical services. I’ve prepared for you an example of work with Last.fm. As we know, this is huge musical website with rich api. In our tutorial we are going to create a script with next functionality: In the beginning it will obtain the top weekly artists (chart), then, we will remember a first one artist (as a top artist), and in the next step we will obtain information about him. And finally, in the third step we will get the top tracks by him. I sure that such script will be very useful for any music website.

Before we begin, we must do the following:

1. Last.fm: Apply for an API Account here

In order to use their API we should join them and obtain our own API keys (as usual: key and secret). During the registration you have to select your account type (free one or paid), after, you have to add your own application name, description and homepage, and after they will give you your api keys, something like that:

Last.fm - step 1

2. Download necessary JS libraries here

We are going to use this ‘lastfm.api.js’ library in our project. Now we are ready, lets start!


Live Demo

Step 1. HTML

This is our HTML markup:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Last.fm javascript API practice | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- load jquery and jsrender libraries -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsrender.js"></script>
<!-- and new libraries to use lastfm -->
<script type="text/javascript" src="js/lastfm.api.md5.js"></script>
<script type="text/javascript" src="js/lastfm.api.js"></script>
<script type="text/javascript" src="js/lastfm.api.cache.js"></script>
<!-- define three templates for our units -->
<script id="lastfmTemplateArtists" type="text/x-jsrender">
<div id="{{:mbid}}" class="artist">
<a href="{{:url}}" rel="nofollow" target="_blank"><img src="{{:image[2]["#text"]}}" alt="{{:name}}" /><b>{{:name}}:</b></a>
</div>
</script>
<script id="lastfmTemplateArtistInfo" type="text/x-jsrender">
<div class="artist_info">
<a href="{{:url}}" rel="nofollow" target="_blank"><b>{{:name}}:</b><img src="{{:image[3]["#text"]}}" alt="{{:name}}" /></a>
<div><noindex>
{{:bio.content}}
</noindex></div>
</div>
</script>
<script id="lastfmTemplateTracks" type="text/x-jsrender">
{{if image}}
<div id="{{:mbid}}" class="track">
<a href="{{:url}}" rel="nofollow" target="_blank"><img src="{{:image[0]["#text"]}}" /><b>{{:name}}:</b></a>
</div>
{{/if}}
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="content-main">
<div class="content-body">
<h2>Top artists</h2>
<div class="content-body-inner" id="top_artists"></div>
</div>
<div class="content-body">
<h2>Top artist</h2>
<div class="content-body-inner" id="top_artist"></div>
</div>
<div class="content-body">
<h2>Top tracks</h2>
<div class="content-body-inner" id="top_tracks"></div>
</div>
</div>
</body>
</html>

There are three different JS-based templates (lastfmTemplateArtists, lastfmTemplateArtistInfo and lastfmTemplateTracks) which we are going to use to generate our objects (the list of artists, single artist block and the top tracks by that artist). Each group of objects will be placed into separated design box.

Step 2. CSS

Now, we have to prepare CSS styles for our project, in the beginning we have to define styles for our main layout and our design blocks:

css/main.css

*{
margin:0;
padding:0;
}
body {
background-color:#E3E3E3;
font:14px/1.3 Arial,sans-serif;
}
.content-main {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 20px auto;
max-width: 1002px;
min-height: 500px;
min-width: 930px;
overflow: visible;
padding: 10px;
position: relative;
}
.content-body {
background: none repeat scroll 0 0 #EEEEEE;
margin: 0 0 15px;
padding: 10px 10px 5px;
position: relative;
}
.content-body h2 {
display: block;
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 0 20px;
}
.content-body .content-body-inner {
border-bottom: 1px solid #E8E8E8;
min-height: 51px;
overflow: hidden;
padding: 9px 12px;
position: relative;
}

This are usual boxes, nothing is especial. Next – styles for the list of artists:

/* list of artists */
.artist {
display: block;
float: left;
margin: 10px;
width: 128px;
}
.artist a {
text-decoration: none;
}
.artist b {
color: #1B1B1B;
display: block;
font-size: 14px;
text-align: center;
}

Next – styles for the single artist info box and his tracks:

/* single artist info */
.artist_info {
display: block;
margin: 10px;
}
.artist_info > a {
display: block;
float: left;
text-decoration: none;
}
.artist_info b {
color: #1B1B1B;
display: block;
font-size: 24px;
text-align: center;
}
.artist_info div {
color: #1B1B1B;
float: right;
font-size: 12px;
padding-top: 30px;
text-align: justify;
width: 630px;
}
/* list of tracks */
.track {
display: block;
float: left;
margin: 9px;
width: 300px;
}
.track a {
text-decoration: none;
vertical-align: center;
}
.track img {
margin-right: 10px;
vertical-align: middle;
}
.track b {
color: #1B1B1B;
font-size: 13px;
}

I hope that it is very easy at the moment. Because the next step is the most important step

Step 3. JavaScript

js/main.js

// on page load
$(window).load(function() {
// define api keys
var apiKey = 'YOUR_API_KEY';
var apiSecret = 'YOUR_API_SECRET';
// create a Cache object
var cache = new LastFMCache();
// create a LastFM object
var lastfm = new LastFM({
apiKey    : apiKey,
apiSecret : apiSecret,
cache     : cache
});
var topArtistName = '';
// get weekly artist chart by tag 'trance'
lastfm.tag.getWeeklyArtistChart({tag: 'trance', limit: 6}, {success: function(data){
// render top weekly artist using 'lastfmTemplateArtists' template
$('#top_artists').html(
$('#lastfmTemplateArtists').render(data.weeklyartistchart.artist)
);
// define top artist name
topArtistName = data.weeklyartistchart.artist[0].name;
// load details of the artist
lastfm.artist.getInfo({artist: topArtistName}, {success: function(data){
// render the single artist info using 'lastfmTemplateArtistInfo' template
$('#top_artist').html(
$('#lastfmTemplateArtistInfo').render(data.artist)
);
// load the artis's top tracks
lastfm.artist.getTopTracks({artist: topArtistName, limit: 9}, {success: function(data){
// render the tracks using 'lastfmTemplateTracks' template
$('#top_tracks').html(
$('#lastfmTemplateTracks').render(data.toptracks.track)
);
}});
}, error: function(code, message){
alert('Error #'+code+': '+message);
}});
}});
});

I’ve already commented quite every line of my javascript code. Firstly – don’t forget to replace YOUR_API_KEY and YOUR_API_SECRET with your actual api keys. So, in the beginning, we create the instances of LastFMCache and LastFM classes, only in this case we will be able to use LastFM API. Our first function to obtain top weekly artists is: ‘tag.getWeeklyArtistChart’. As parameters – this are tag and limit. Once we have obtained the server response – we generate the HTML result with ‘render’ function. The second function (to obtain information) of single artist is: ‘artist.getInfo’ (with single param: artist). And finally, we can get the top tracks using ‘artist.getTopTracks’ function. As params we can pass the artist name (artist) and amount of results (limit).


Live Demo

Conclusion

I hope that everything is clean in today’s code. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!

SIMILAR ARTICLES

Bootstrap Forms

0 60
jQuery Mobile Lesson 6

0 15

15 COMMENTS

  1. Hi,

    Thanks for the article. Can i ask you a simple question. How are you hiding your app secret code. I looked in the view source and your app secret key is visible to anyone.
    Do you know how to hide it java script, perhaps use node.js.

    Any comments from the readers, would be useful too.

    Thanks
    Aryan

    • Hello Aryan,
      You are right, this is one of the disadvantages (open app secret code).
      I can recommend you to use base62 encode method to hide most of the functionality, you can use this web-service : javascriptcompressor.com

  2. Hey There. I discovered your weblog using msn.
    This is a really well written article. I’ll be sure to bookmark it and return to read extra of your useful information. Thank you for the post. I will definitely return.

  3. Hi,
    I have a small question also connected to this LastFm tutorial. I want to create a similar page to this one, but instead of getting top artists I want to put in a search bar and when you type in a track name, you get all the found track names, description of the artist, image of the track and the genre. Can you please give a small tutorial on that?

    Thanks!

    • Hello Shiro,
      I have just checked Last.FM API once more, and, there are several search methods which you can use to make your script:
      album.search
      artist.search
      tag.search
      track.search

  4. Hi,

    nice work
    I want to do the same thing, but with my icecast informations, only take pictures from the played songs from our radio

    any idea ?

Leave a Reply