写了个页面分享此时此刻我在听的歌

演示

页面是 https://imba97.me/playing

原理

最近发了篇博客文章：《自建音乐服务 Navidrome》，里面提到可以使用last.fm来保存听歌历史

通过这个网站的接口可以拿到播放列表，根据听歌的先后顺序，也有当前是否正在播放的字段

后端

让Chat GPT用PHP写了个程序，功能就是简单的请求接口、10 秒数据缓存

因为last.fm接口给的图片国内没法访问，所以图片优先获取itunes上的，如果都没图，保底还会有个icon

前端

用简单写了个前端，10 秒轮询调接口获取最新数据

可以展示加载中、当前未听歌、当前正在听歌状态

用了 UnoCSS，永远的神！论 UnoCSS 实现一个旋转效果能有多简单

<divi-ph-music-note-simple-duotoneh-20w-20animate-spinanimate-duration-30000></div>

开源

Github: imba97/playing-music