写了个页面分享此时此刻我在听的歌
演示
因为是个网页,所以可以通过 iframe
分享到各处
页面是 https://test.imba97.cn/playing
原理
最近发了篇博客文章:《自建音乐服务 Navidrome》,里面提到可以使用 last.fm
来保存听歌历史
通过这个网站的接口可以拿到播放列表,根据听歌的先后顺序,也有当前是否正在播放的字段
后端
让 Chat GPT
用 PHP
写了个程序,功能就是简单的请求接口、10 秒数据缓存
因为 last.fm
接口给的图片国内没法访问,所以图片优先获取 itunes
上的,如果都没图,保底还会有个 icon
前端
用 简单写了个前端,10 秒轮询调接口获取最新数据
可以展示加载中、当前未听歌、当前正在听歌状态
用了 UnoCSS,永远的神!论 UnoCSS 实现一个旋转效果能有多简单
1 | <div i-ph-music-note-simple-duotone h-20 w-20 animate-spin animate-duration-30000></div> |
开源
Github: imba97/playing-music
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 怠惰のコエ - imba久期 BLOG!
评论