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

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

就简单介绍下 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端版本才能用（作者也没更新了）

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

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

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

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

https://lowb.ren/nowplaying/

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

DEMO预览：

1.2

FireShot Capture 2 - ▶ GALAXY HIDE AND SEEK - https___goubi.me_.png

1.1

FireShot Capture 1 - NOWPlaying - Alpha - https___goubi.me_.png
（还是千恋的OP好听= =）

部署

粗略了解一下，部署也是挺简单的

1.申请 Last.fm 的 API

申请去访问 https://www.last.fm/api/account/create ，申请流程很简单，按需填写，填下完就马上有API key了

2.在网页部署好

其实可以参照DEMO，这里也没啥好说的_(:зゝ∠)_

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

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

对脚本进行初始化（这是最近听过的列表，还有个nowplaying，可以自己去demo看看）

    <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

DEMO预览：

1.2

1.1

部署

1.申请 Last.fm 的 API

2.在网页部署好

3.其余说明

发表评论