last.fm apk
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.
Last.fm javascript API实践今天，我想给您一些新的东西，我们已经讨论过不同的社交网络，例如facebook，google或twitter，但我们还没有尝试其他服务，例如音乐服务。 我为您准备了使用Last.fm的示例。 众所周知，这是一个拥有丰富API的巨大音乐网站。 在我们的教程中，我们将创建一个具有下一个功能的脚本：首先，它将获取每周的顶级艺术家(图表)，然后，我们将记住第一个艺术家(作为顶级艺术家)，然后在下一步中，将获得有关他的信息。 最后，在第三步中，我们将获得他的关注。 我相信这样的脚本对于任何音乐网站都将非常有用。
Before we begin, we must do the following:
在开始之前，我们必须执行以下操作：
1. Last.fm： 在此处申请API帐户 (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:
为了使用它们的API，我们应该加入它们并获取我们自己的API密钥(通常：密钥和机密)。 注册期间，您必须选择帐户类型(免费或付费)，之后，您必须添加自己的应用程序名称，描述和首页，然后它们将为您提供api密钥，如下所示：
2. 在此处下载必要的JS库 (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!
我们将在项目中使用此“ lastfm.api.js”库。 现在我们准备好了，让我们开始吧！
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
(Step 1. HTML)
This is our HTML markup:
这是我们HTML标记：
(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><!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.
我们将使用三种不同的基于JS的模板(lastfmTemplateArtists，lastfmTemplateArtistInfo和lastfmTemplateTracks)来生成对象(艺术家列表，单个艺术家块以及该艺术家的热门曲目)。 每组对象将放置在单独的设计框中。
(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样式，在开始时，我们必须为主要布局和设计块定义样式：
(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;
}*{
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;
}/* 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;
}/* 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);
}});
}});
});// 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).
我已经注释了我的javascript代码的每一行。 首先–不要忘记用您的实际api密钥替换YOUR_API_KEY和YOUR_API_SECRET。 因此，一开始，我们将创建LastFMCache和LastFM类的实例，只有在这种情况下，我们才能使用LastFM API。 我们获取顶级每周艺术家的第一个功能是：“ tag.getWeeklyArtistChart”。 作为参数–这是标记和限制。 一旦获得服务器响应，我们将使用“ render”功能生成HTML结果。 单个艺术家的第二个功能(获取信息)是：“ artist.getInfo”(带有单个参数：艺术家)。 最后，我们可以使用“ artist.getTopTracks”功能获得热门曲目。 作为参数，我们可以传递艺术家名称(艺术家)和结果数量(限制)。
现场演示
(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!
我希望今天的代码中的所有内容都是干净的。 如果您对文章的进一步建议有任何建议，欢迎与我们分享。 祝您工作顺利！
last.fm apk
