在线使用： LiveSort | 歌曲无感过渡与自动排序
初衷
我们为什么会喜欢去看演唱会？仅仅是因为临场的氛围感吗？
演唱会的歌曲编排通常都是精心设计的，就像一部电影一样。
讲究起承转合，讲究一波三折。
游戏设计领域有个概念，叫做 “优秀兴趣曲线” ：
↑大概长这样
看着到这里，你是不是有点感觉了？这就是一波三折的可视化体现。
这个“兴趣曲线”，可以说对所有的“过程体验型”产品都适用：
-
开头先勾住你，中间在给予强度稍低于开头的刺激；
-
但这个过程也并不是一味上升的，中间还是有不少波动的；
-
最后推向高潮，实现最大的刺激
不只是歌曲的顺序，演唱会乐手们的默契配合，还会时不时给你来点“无缝转场”。
于是我就想，来做一个工具呢？能同时让你的歌单拥有一波三折的编排和无感的过渡。
设计呈现
经过我的多轮设计迭代，前端最后看上去很像，小米
在导入歌曲之前，歌单列表有一个唱片机bot，如果导入的话它会拨一下自己的指针，算是增加一些趣味性的设计：
导入歌曲后，歌单列表会有歌曲交换的排序动效：
排序完成后，左侧的情绪波动曲线会显示最终的结果：
排序算法
那么这个排序算法是什么思路呢？其实就是函数拟合，去拟合优秀兴趣曲线。
为了将歌曲匹配到兴趣曲线上，LiveSort 采用浏览器端分析链路：通过 Web Audio API 在本地解码并提取音频特征。除此之外，还专门提取首尾15秒的特征，以确保歌曲之间的平滑过渡。
特征值为以下三个：
-
BPM (节拍率)：决定歌曲的物理速度。
-
Energy (RMS能量)：衡量歌曲的响度和饱满度。
-
Brightness (频谱质心)：反映声音的明亮程度（低沉还是高亢）。
LiveSort 的核心是一个贪心优化算法。对于播放列表中的每一个位置，算法会计算剩余所有候选歌曲的“代价函数 (Cost Function)”，并选择代价最小的歌曲填入该位置。
代价函数综合考虑了三个权重因素：
-
情绪贴合度 (最高权重)：候选歌曲的情绪得分与“兴趣曲线”当前位置理想得分的绝对差值。
-
BPM 衔接度：上一首歌结尾的 BPM 与候选歌曲开头的 BPM 的比例。完美衔接（1:1）或倍速衔接（1:2，例如 60 BPM 接 120 BPM）会获得极低的惩罚代价。
-
能量平滑度：上一首歌结尾的能量与候选歌曲开头的能量差异，避免听感上的突兀。
无感过渡
但其实，我调了最久的功能，是两首歌之间的过渡，它在底部的播放器部分。
实测我手上的歌曲，会比网易云音乐移动端自带的智能过渡更具有“呼吸感”，网易云有时候会把下一首歌切的太早，或者把另一首歌结尾部分强行变速（不维持原调）以匹配后续歌曲的开头节奏。
我还专门设计了一下这个动效，也就是这两个圆的融合和分离，运动曲线感觉还是挺爽的：
歌曲进度条两端有橙色区域，就是算法识别出来的需要进行过渡的区域。
过渡算法是怎么实现的？其实想法也很简单，调音量、调EQ、加混响：
系统会在前一首快结束时，提前把下一首轻柔接入，整个过渡大约 10 秒左右。
-
自动找时机：系统会判断前一首尾段状态，选择更合适的切入点，不会生硬“硬切”。
-
音量自动平衡：自动控制两首歌的重叠音量，避免突然变大声或听起来太吵。
-
效果平滑过渡：EQ 和混响是渐进变化，不会一瞬间把音色改得很夸张。
-
保留下一首开头细节：尽量让下一首的前奏清晰可听，不被前一首尾声盖住。
其他功能
页面顶部是一些小的功能按钮，可以切换语言、深浅色、去到Github项目页、以及联系我：
当然还有最重要的，问题反馈，点击会跳转到飞书问卷，有什么使用问题都可以反馈给我：
这个工具还能做什么呢？我也想了一些场景。
-
如果你是一个做音乐合集的博主，这个就很适合你，既能把庞大的歌单进行合适的编排，又能确保歌曲间的顺畅过渡；
-
如果你自己视频配乐，两首BGM衔接僵硬，也可以试试这里的过渡功能。
应用有导出页面的，你可以选择歌曲、格式和质量，以及是否开启歌曲的无缝过渡：
除了导出音频，你还可以导出一个信息图，长这个样子，记录了歌单情绪曲线、歌曲时长BPM啥的：
TRAE过程
先来看看最原始的提示词，十分的自然语言了，但给出的demo已经十分可用了：
刚开始的UI其实更为简陋，我的设计要求应该就是“黑白极简，使用serif衬线字体”：
后来决定对毛坯房进行精修，基本就是去pinterest或者awwwards上面找设计参考图，实测Gemini 3.1执行较好：
最后还是贴一下Github项目主页，大家喜欢的话可以给个Star，有研究歌曲过渡的大伙也可以试试我这套方法：
