自己的 Last.fm 实时播放的同步页面

我记得以前 Last.fm 出过另一个个人专页，内容就是全屏单页的实时播放展示页面，当时感觉这新内容很有新意（可以拿来装逼2333）。后来不知为何就关掉这页面了，前几天找遍整个last.fm，都找不回来了...然后，既然没有，那就自己做个简单点吧..

就简单介绍下 Last.fm 吧（[维基百科](https://zh.wikipedia.org/wiki/Last.fm "维基百科")）
> Last.fm是一个以英国为总部的网络电台和音乐社区。有遍布232个国家超过1500万的活跃听众。2007年被CBS交互以2.8亿美元价格收购，是目前欧洲Web 2.0网站中成交价最高的纪录。
Last.fm使用的音乐推荐方式称为“Last.fm Scrobbler”，该系统提供安装在用户的电脑播放程序（支持iTunes、Winamp、Windows Media Player、Foobar2000等）或随身听设备的插件，记录（scrobbling）用户收听的每一首歌（在线流电台或本地音乐文件）的信息，发送回Last.fm数据库，并以其创建该用户的个人音乐品味，显示在该站提供予用户的个人网页上。该站亦提供多种社交网络服务，可让用户推荐或收听合其喜好的音乐。

对于大部分用户来说，都会选择这网站的"Scrobbler"功能，毕竟可以把你听过的音乐同步，并保存下来顺便统计你听过的次数。可乐而不为，可惜他只能跟部分本地播放器和一些网页版的播放器同步（可能需要脚本），反正网易云音乐就不能同步的（自家有统计功能当然不会便宜给其他网站啊）。虽然很早之前就向云音乐反映能不能添加last.fm关联，然而到现在都没消息2333。虽然现在可以利用注入的方式进行同步，然而只能在很旧的PC端版本才能用（作者也没更新了）

![20171010171122.png](https://cdn.lowb.ren/s/2017/10/3373791172.png)

自从买了新硬盘后，没有什么理由不在本地听歌了（一断网没歌听也是难受啊2333），直接在网易云把所有歌下到移动硬盘了。然后再装回last.fm，终于可以回归每天同步记录的日子了。

------------
然而，本文不是说last.fm的好处，而是介绍一下 jQuery.last.fm

关于这js，我看了github几十个项目，不过大多都是 node.js 或 vue 等版本，对我这连点皮毛都不会的我叫我怎么用呢_(:зゝ∠)_，最后还是选择这个 jquery 脚本，因为可以直接展示最近听过的记录和现在播放的歌曲，对于我这比较懒的我来说也是挺好入手的。

姑且花了一天做出了个比较好看的DEMO（其实就是从本来的demo改的2333）

[https://lowb.ren/nowplaying/](https://lowb.ren/nowplaying/ "hhttps://lowb.ren/nowplaying/")

jquery.last.fm项目：[https://github.com/dcneiner/lastfm-recent-tracks-jquery-plugin](https://github.com/dcneiner/lastfm-recent-tracks-jquery-plugin "https://github.com/dcneiner/lastfm-recent-tracks-jquery-plugin")
（其他还有很多同类项目，就这个比较容易入手）

## DEMO预览：
### 1.2
![FireShot Capture 2 - ▶ GALAXY HIDE AND SEEK - https___goubi.me_.png](https://cdn.lowb.ren/s/2017/11/1401436768.png)
### 1.1
![FireShot Capture 1 - NOWPlaying - Alpha - https___goubi.me_.png](https://cdn.lowb.ren/s/2017/10/4017523883.png)
（还是千恋的OP好听= =）

## 部署
粗略了解一下，部署也是挺简单的
### 1.申请 Last.fm 的 API
申请去访问 https://www.last.fm/api/account/create ，申请流程很简单，按需填写，填下完就马上有API key了

### 2.在网页部署好
其实可以参照DEMO，这里也没啥好说的_(:зゝ∠)_

在`<head>`后或`</body>`前引用资源

```javascript
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="lastfm.jquery.js"></script>
```

对脚本进行初始化（这是最近听过的列表，还有个nowplaying，可以自己去demo看看）
```javascript
	<script type="text/javascript">
	$(document).ready(function() {
		$('#lastBox').lastplayed({
			apikey:			'6fedfd312xxxxxxxxxxx2ca3', //填写你的api
			username:		'Finer04',  //填写你的用户名
			limit:			5,   //最多显示多少记录
			coversize:		300,   //封面大小
			refresh:		10   //几秒刷新一次
		});
	});
	</script>
```

### 3.其余说明
因为每隔30秒刷新一次，就固定刷新div，所以最好在body中加上div

`<div id="lastBox" class="lastfm"></div>`

关于各种参数
> apikey:         (string) Last.fm API key
> username:       (string) 用户名
> limit:          (int) 加载的专辑的数量 - 选填, 默认为 20
> cover:          (bool) 展示封面 - 选填，默认true
> coversize:      (int) 封面大小 - 选填，默认 64x64
> datetime:       (bool) 显示播放时间和日期 - 选填，默认true
> coversize:      (int) 封面大小 - 选填，默认 64x64
> datetime:       (bool) 显示播放时间和日期 - 选填，默认true
> refresh:        (int) 多少秒检测一次状况 - 选填, 默认为 0 秒(不刷新)refresh:        (int) 多少秒检测一次状况 - 选填, 默认为 0 秒(不刷新)
> grow:           (bool) 如果是true，将会扩展box； 如果是false，会把最后的专辑删掉 - 选填, 默认false
> shownowplaying: (bool) 显示当前播放的音乐 - 选填, 默认true
> albumlinks:		(bool) 点击专辑名直接导向last.fm的专辑页 - 选填，默认false
> coverlinks:		(bool) 点击封面直接导向last.fm的专辑页 - 选填，默认false
> artistlinks:	(bool) 点击作家名直接导向last.fm的专辑页 - 选填，默认false
> tracklinks:		(bool) 点击track直接导向last.fm的专辑页 - 选填，默认false
> linktarget:		(string) 点击以上的链接将用什么方式打开 (if enabled) - 默认 `_blank`

评论已关闭