我做了一个周深歌曲淘汰赛生成器：挑选 128 首歌 PK，选出你的年度 TOP1
作为周深的听众，相信很多人都会遇到一个问题：
喜欢的歌太多了，真的很难排出一个明确的顺序。
一首《大鱼》陪伴了很多人的青春，一首《光亮》又承载了不同的回忆，《小美满》《若梦》《化身孤岛的鲸》《借给我一盒火柴》......每一首歌都有自己的意义。
但是如果让你回答：
"你最喜欢周深的哪一首歌？"
可能很多人都会陷入纠结。
所以我做了一个小工具：
周深歌曲淘汰赛生成器。
它可以把歌曲像体育比赛一样进行两两 PK：
128 强 → 64 强 → 32 强 → 16 强 → 8 强 → 半决赛 → 决赛 → 冠军
最终选出属于你自己的"年度最佳歌曲"。
工具地址：
https://shandianchengzi.github.io/charlie/bracket.html
为什么想做这个工具？
很多音乐投票工具都是简单的列表投票。
但是列表有一个问题：
当候选数量很多时，人很难进行比较。
比如：
"《大鱼》和《光亮》哪首更喜欢？"
这个问题其实比：
"128 首里面选一首"
容易回答很多。
淘汰赛的形式刚好符合人的比较习惯：
每次只需要面对两个选择。
你不用考虑全部歌曲，只需要回答当前这一场：
这一首，还是那一首？
不断选择以后，最终会自然产生一个结果。
内置 900+ 首周深相关歌曲数据
为了方便第一次使用，网页默认加载了一组 128 首歌曲作为示例对阵。
但实际内置歌曲库远不止这些，目前整理收录了 900+ 首周深相关作品，包括原唱、翻唱、合作歌曲、综艺演唱、晚会舞台以及影视相关歌曲等。
最大的工作：整理歌曲试听链接
这个工具里我花费最多时间整理的部分，其实不是代码。
而是歌曲数据。
目前内置：
900+ 首周深相关歌曲试听链接。
这些数据不是简单的歌曲名称列表，而是为每一首作品建立了对应试听入口。由于周深参与过大量综艺、舞台、翻唱和合作演出，同一首歌可能存在多个版本，因此歌曲整理和链接匹配本身也是这个工具制作过程中工作量最大的部分。
每首歌曲都会对应到可试听地址。
包括：
- QQ 音乐
- 网易云音乐
- B站等平台
为了提高匹配成功率，还做了多层匹配：
例如：
- 精确匹配歌曲名
- 自动处理括号、空格、标点
- 模糊匹配相近名称
- 简单拼写错误容错
这样即使歌曲名称存在一点差异，也尽量能够找到对应链接。
这部分数据整理实际上比写程序本身花费了更多时间。
两种玩法
1. 做题模式：认真选出你的冠军
这是默认玩法。
点击比赛中的歌曲格子后，会弹出两个候选：
例如：
《大鱼》 VS 《光亮》
选择你认为更喜欢的一首。
选择完成后：
- 胜者进入下一轮；
- 比赛继续推进；
- 最终产生冠军。
整个过程就像自己举办了一场歌曲世界杯。
2. 试听模式：纠结时直接听
如果你不知道怎么选，可以切换试听模式。
点击歌曲：
会自动寻找对应试听链接，并打开对应页面。
不用自己搜索歌曲。
特别适合：
- 不熟悉早期作品；
- 想重新回顾某首歌；
- 在两首歌之间反复比较。
支持保存、导出和恢复
一次完整比赛可能需要很长时间。
所以工具支持：
自动保存
输入内容和设置会保存在浏览器本地。
关闭网页后再次打开，可以继续使用。
导出结果
支持导出：
- PNG 图片
- SVG 文件
- Excel 表格
可以保存自己的比赛结果，也可以分享给其他粉丝。
导入恢复
如果之前导出了比赛表格，也可以重新导入。
不用重新开始。
技术实现
这个项目完全运行在浏览器中。
特点：
- 单个 HTML 文件；
- 无需安装；
- 无服务器；
- 打开网页即可使用。
对阵图采用 SVG 动态生成，因此可以根据歌曲数量自动调整布局。
同时支持不同规模：
- 8 首；
- 16 首；
- 32 首；
- 64 首；
- 128 首。
不足数量时，会自动补齐空位。
写在最后
这个工具本质上并不是一个复杂的软件。
它只是想解决一个很简单的问题：
当喜欢的歌曲太多时，给自己一个认真选择的过程。
周深有很多优秀作品，每个人心中的第一名可能都不一样。
有人喜欢《大鱼》的故事感，
有人喜欢《光亮》的力量感，
有人喜欢某一次现场演唱带来的回忆。
所以最终冠军不是官方答案。
它只是：
属于你自己的周深歌曲冠军。
如果你也是周深的听众，可以试试看，看看最后哪一首歌会成为你的 TOP1。
作者注：这篇文章全文由AI直接分析网页生成，不代表作者个人的主观看法。写这个网页的主要目的是为了陈列与推广周深的歌曲歌单。
这个淘汰赛我自己去填的时候填得非常痛苦，因为感觉每一首都很好听，手心手背都是肉，完全选不出来。所以我个人认为这个游戏形式的可玩性是很低的，但是也确实是有一些受众。最终我还是决定，写都写了，就发出来介绍一下。
本账号所有文章均为原创，欢迎转载，请注明文章出处：https://shandianchengzi.blog.csdn.net/article/details/163110398。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。