我记得以前 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端版本才能用(作者也没更新了)

20171010171122.png

自从买了新硬盘后,没有什么理由不在本地听歌了(一断网没歌听也是难受啊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