自建 · 在线音乐流媒体

把每一个字
点亮

从官方拿到逐字歌词、随倍速转的唱片机、进度条上的副歌点、可自定义的全站主题色 —— Bear Music 是一个把细节抠到底的音乐网站。

Scroll
QRC
官方逐字歌词
0
接口全量现代化
3
层服务 · 安全隔离
0.5–2×
唱片随倍速转
招牌 · 逐字歌词

从官方拿到每一个字的时间

解密 QQ 官方加密 QRC 歌词,拿到每个字的毫秒级时间戳,一个字一个字点亮。下面正在演示:

仍然在我的梦里,与你相见
逐字歌词逐字 + 翻译
关键在于「不闪」

丝滑,是用一个变量换来的

每个字常驻同一套渐变背景,只用一个 0→1 的变量控制填充比例,绝不在「纯色 ↔ 渐变」之间切换 —— 所以填充丝滑、永不闪烁。

顶栏歌词同步逐字:不进播放页也能跟着唱,唱过的字用你的主题色。
翻译 / 罗马音一并解密,非标准歌词自动降级为手动滚动。
性能自适应:低帧只温柔提示,关不关由你定。
唱片机播放页沉浸式播放页
手感 · 唱片机

一台会转的唱片机,
还跟着倍速变速

点开播放页,封面化作黑胶在唱机上旋转、唱针落下。开 0.5 倍速它慢悠悠转,开 2 倍速它转得带劲 —— 转速跟着播放倍速走。

唱针角度按尺寸计算,SVG 随容器缩放,任何屏幕落点都对得准。
FLIP 动画:底栏小封面平滑「飞」成大唱片,关闭再飞回去。
转速 = 倍速:用 Web Animation 的 playbackRate 跟随,0.5×–2× 实时变。
巧思 · 副歌点

进度条上,那个一点直达高潮的点

取 QQ 官方试听片段的起点 —— 它几乎就是这首歌的副歌。在进度条上标一个点,点一下就跳过去。试试拖一下下面这个点:

小圆点 = 副歌位置,颜色跟进度条一致,播放页里会变成白色。
评论楼中楼评论 · 楼中楼
沉浸 · 评论

边看歌词,边读评论

从屏幕最左中部「展开评论」拉出,毛玻璃面板浮在左侧,遮罩透明、不盖底部播放条 —— 右边歌词照看不误,放歌也不打断。

楼中楼层级回复:缩进 + 左竖线,「谁回复了谁」一眼看清。
热评 / 最新分列,分页加载更多。
下载选音质下载 · 选音质
下载 · 选音质

标准 / 高品质 / 无损,随你挑

下载前弹窗挑音质,并把「歌曲 - 歌手」文件名一键复制好,保存后改名顺手。

音质徽章:128k / 320k / FLAC 一目了然,默认选最高。
直连下载:不绕服务器,省带宽、更干脆。
发现 · 内容

搜索、推荐、歌单、MV,一个不少

每日推荐用真实歌单与歌手,新歌新碟、排行榜、电台、歌手页一应俱全。

藏在细节里

好用,是一处处抠出来的

🎨

主题色全站跟随

只挑一个主色,透明度 / 悬停 / 选中态由它派生,连 naive-ui 组件也一起变。点一下:

💾

记住上次播放

刷新、重开都能续上上次的歌和进度,回来就接着听。

📀

歌单实时刷新

QQ 导入的歌单每次进列表都拉最新封面与歌曲数。

🌗

深浅色 + 记忆

主色与深浅写进本地,跨设备也还在。

🎬

MV 即点即看

毛玻璃弹窗、自适应高度、视频全屏多浏览器兼容。

秒显再刷新

列表先用缓存秒开,再在后台拉最新,不卡首屏。

🔀

切换有反馈

顶部进度条 + 淡入过渡,知道「在加载」。

🔒

安全收口

移除 SSRF、接口绑本机、统一 SSO 登录。

技术栈

趁手的现代前后端

Vue 3PiniaVue Router Vitenaive-uithree.js GSAPNode.jsExpress better-sqlite3nginxQQ musicu API
工程 · 安全隔离

三层服务,各司其职

浏览器只跟前端的后端说话;数据接口与 Cookie 服务都锁在本机,外部碰不到。

🐻
bear-music · 前端 + 后端
Vue 3 / Pinia / Vite · Express(better-sqlite3) · 接入 SSO
music.pengfei.ink
↓ 统一代理 /api
🎵
qq-music-api · 数据层
读接口全量迁移现代 musicu · 歌曲 / QRC歌词 / 评论 / MV
127.0.0.1:3300
↑ 提供有效 Cookie
🍪
music-backend · Cookie 后台
Cookie 自动续命 / 扫码登录
127.0.0.1:3002

放一首歌,点亮每个字

Bear Music 已经在线上跑着了。