我爱南京:李志全集,以黑胶呈现

如何在 2025 年做一个黑胶唱机,播放一位不存在歌手的作品?

我爱南京

TL; DR

缘起

第一次听李志大概是 2012 年,那会儿还没上大学,保送结束后百无聊赖地逛人人网,无意间听到;13 年来到北京,还去工体听过一次,李志和一众民谣歌手拼盘,一首《墙上的向日葵》让我迅速明白他和他们都不一样。

后来有一搭没一搭地听,也了解到一些他的故事,比如豆瓣上的 BB 情史之类的 lol

再后来他莫名其妙被封了,此时我已经熟练掌握科学上网技巧,于是去 Spotify 听,去 YouTube 听,应听尽听。

20 年 6 月去上海前的晚上,我突然失眠了,心血来潮整理了下本地 iTunes 里李志的专辑,从网络上各处搜集,应该是全网最全的了。分享给过几个朋友,但数据库太大了,很不方便,比如给 @Junyu 是下楼直接 U 盘拷贝。

李志的 iTunes 曲库

24 年去福冈听了三缺一巡演,现场很多人,看得出来李志明显憋坏了,唱了两个多小时,我都站累了,他还在唱。真好。

三缺一巡演福冈站

今年在家比较闲,又整理了一下曲库,把缺了无损的专辑补齐了,把 ID3 信息补全了,把专辑封面补齐了,算是一个阶段性成果。

如何放到互联网上?

接下来问题来了,如何把这个音乐库放到互联网上?

而且我不想花精力维护,我想做成一个互联网上的博物馆,部署好就完事儿了,我什么也不用做,你什么也不用做,他就在那儿,打开就能听。

也有其他人做的在线播放器,但是看起来成本不小,域名、CDN、存储都是成本。而且他们的页面也不够优雅。

存储相对好办,在线播放的部分 256kbps 的 AAC 足够了,直接用 Cloudflare R2 存储。无损的 Apple Lossless 文件,@碎瓜 建议我用 Hugging Face 的 Datasets 存放,非常合适!完全没想到还能这么用。

做一个黑胶唱机!

1 月去了趟东京,逛 Tower Records 的时候买了一张李志的黑胶;最近有一个非常喜欢的 app: MD Vinyl,切换专辑的视图就和在 Tower Records 里挑选黑胶一模一样,惊为天人。

所以我想,干脆整个活吧,做一个黑胶播放器。

我先找到了一个审美不错的开源项目,在本地跑起来了。当我视图做一些样式修改,发现这个项目是一个单页面 2000 多行代码的巨型项目,最后更新是 16 年,根本改不动。

那不如自己写一个吧,我把新项目命名为 Vinyl Vue,纯粹是觉得好听。我不懂 vue,只是一直听过,口碑不错,名字朗朗上口,那就他了。

于是我打开了 Cursor。

我一点也不会写代码,一点也不会,一点也不骗你。

可是我有 Cursor。

这不是我用 Cursor 做的第一个项目,在此之前,我用 Cursor 写了一个基于 Astro 的个人网站(就是你正在读的这个)。Cursor 真的给我一种我无所不能的错觉:

  • 我 tm 可以实现任何项目
  • 不懂就问,不管 tnnd 直接 accept,不行就再来一次

反正历经波折(主要是和 Cursor 吵架),清明节在家把这个项目肝了出来。不算一开始改那个开源项目的时间,一共花了 16 个小时,后来整理信息部署上线又花了一些时间,总共 20 个小时吧。

最终效果

最爱这版杭州

隆重介绍我的作品,当当当:

  • 一个复古的黑胶唱片播放器,拟物的界面
  • 支持播放暂停,支持切换曲目,支持展示当前曲目,这里用了类似古早 CD 机的点阵字体
  • 播放的时候,会有唱针摩擦黑胶的沙沙声,唱片会转动,黑胶唱臂会随进度移动
  • 点击按钮或者点击唱臂都可以暂停,暂停的时候,唱臂会自己移动到旁边
  • 点击专辑封面,可以查看所有专辑列表;我本来做了曲目列表但是去掉了,毕竟真实的黑胶唱机也看不到曲目列表

总之,我一个完全不懂代码的菜鸟,凭着一腔热血 (和一个普普通通拥有顶级 LLM 模型加持盛惠仅需 $20/mo 的 Cursor),肝出了这个项目,还是挺自豪的!

整理一下我用到的技术栈:

  • 框架:Vue 3
  • 语言:TypeScript
  • 构建工具:Vite
  • 状态管理:Pinia
  • 部署:Cloudflare Pages
  • 数据统计:Umami
  • 存储:Cloudflare R2
  • 无损存储:Hugging Face Datasets

结语

这个项目有完整的音乐、完整的技术实现、完整的 SEO。上线后我就没管了,偶尔看看 Umami 后台,发现也有人在线在听,这个感觉还是挺棒的。

Umami 后台

我并没有做任何推广,甚至都没有发一个帖子,只是默默放到网上,因为毕竟音乐是李志的,我只是做了整理,提供了一个在线播放器,一点微小的工作。

最近李志注册即刻了,每天话很多。不知道他会不会看到这个项目,不知道他会怎么想。我毕竟没有征得他的同意,内心还是忐忑的。B 哥,如果你看到了,不认可这种行为,请告诉我,我立刻下线。

如果屏幕前/播放器前的你喜欢这个项目,也请告诉我,我会很开开心 :)

anyway, have fun

宝贝

人和人一场游戏


2025-04-20 @Shanghai