多轨音乐播放器 (20首歌)

tasy5kg

@Ta 07-16 23:31发布，07-26 22:48修改 1101点击

网页链接

点击上方的“网页链接”可跳转到完整页面。

更新历史：

2025-07-26

新增歌曲；

使用 Vite 构建。

2025-07-23

新增歌曲；

交互优化；

增加歌词和原曲链接；

大幅降低内存占用，减少卡顿。

2025-07-22

界面优化；

新增多首歌曲；

新增波形图显示，点击可播放到对应位置；

音频资源已托管到国内服务器，大幅提升加载速度；

修复 FireFox 浏览器内界面异常。

隐藏样式查看源码

回复列表(48|隐藏机器人聊天)

1

无名啊

@Ta / 07-17 00:43 / 样 / 源

@tasy5kg，AI 生成的页面挺美观呀，成本需要多少呢？

想压个 3.7 MB 小体积 + 音质还行的快速试听版本，但 iframe 里好像没法 fetch 老虎林的附件。。

音频链接：人声.m4a（935.45 KB）

音频链接：吉他.m4a（745.9 KB）

音频链接：鼓、贝斯.m4a（894.92 KB）

音频链接：键盘、管弦乐.m4a（813.69 KB）

音频链接：节拍器.m4a（417.59 KB）
2

tasy5kg

@Ta / 07-23 03:15 / 样 / 源

@无名啊，用的 Gemini，没有花钱。不知道还有没有免费的无防盗链的文件托管平台。码率我选的96kbps，我试试能不能再压一压。

更：还用了 VS Code 内置的 Copilot
3

tasy5kg

@Ta / 07-17 01:15 / 样 / 源

@无名啊，你是用xHE-AAC编码的吗？
4

无名啊

@Ta / 07-17 01:25 / 样 / 源

@tasy5kg，是。你是有啥浏览器听不了吗？

另外，在 Mac 的浏览器上，一直不能听 Opus。。

Caniuse 说，三个月前更新的系统，才能部分支持。。
5

tasy5kg

@Ta / 07-17 01:36 / 样 / 源

@无名啊，嗯，我是想问你怎么转的...这个编码器似乎是收费的。我查到 Windows 上的 EZ CD Audio Converter可以试用21天，支持xHE-AAC转码，但转码后的音频音量会比原文件小很多
6

无名啊

@Ta / 07-17 01:46 / 样 / 源

@tasy5kg，我也是用这个，找的那种版本。。
7

无名啊

@Ta / 07-17 02:17 / 样 / 源
@tasy5kg，用 js 同时播放一楼 5 个音频，感觉效果听起来还行。。
```
document.querySelectorAll('ul.comments-ul > li:first-child audio').forEach(n => n.load() || n.play())
```
8

tasy5kg

@Ta / 07-17 02:27 / 样 / 源

@无名啊，我用的最新Chrome，直接播放<audio>标签的xHE-AAC音频可以，但我尝试导入到主楼的DEMO里无法解码，可能因为用了Web Audio API

做这个DEMO一开始Gemini也是直接JS同时播放5个<audio>的，但我发现有时会出现音轨之间进度不同步的问题，要求Gemini修复，然后Gemini就改用Web Audio API了
9

无名啊

@Ta / 07-17 02:40 / 样 / 源

@tasy5kg，是每个音乐预加载开头一小段，完成时间不同吗？

先 .load() 预加载，都准备好后，再 .play()，可行吗？

我这也是类似问题，需要执行两次 7 楼代码才行。safari 每次加载都会重新下载，只能 .load() 再 .play()。。
10

无名啊

@Ta / 07-17 02:42 / 样 / 源

@tasy5kg，不会是 <audio> 与 Web Audio API 是不同团队完成，不共用一个解码组件吧。。
11

tasy5kg

@Ta / 07-17 02:50 / 样 / 源

@无名啊，Gemini 当时说：

你遇到的这个音轨不同步问题是使用多个 HTML5 <audio> 标签进行同步播放时的一个典型“老大难”问题。
问题的根源在于，当你通过 JavaScript 循环调用多个 <audio> 元素的 .play() 方法时，浏览器并不能保证它们会在完全相同的时刻开始播放。由于设备性能、CPU 调度、浏览器内部任务优先级等因素，每个 .play() 命令的实际执行会存在微小的、不可预测的延迟。在设备卡顿时，这种延迟会被放大，导致肉眼可见的音轨不同步。
要从根本上解决这个问题，最佳实践是使用 Web Audio API。它专为在浏览器中处理和合成音频而设计，提供了一个高精度的计时系统，能够实现样本级别（sample-accurate）的精确同步播放，完全不受主线程卡顿的影响。
12

无名啊

@Ta / 07-17 03:22 / 样 / 源

@tasy5kg，

但转码后的音频音量会比原文件小很多

转码后的 xHE-AAC 文件，好像记录有增益元数据。

你试试清除掉后，是否与原文件一致？

我这边好像不太听的出来。。
13

tasy5kg

@Ta / 07-17 03:42 / 样 / 源

@无名啊，我试了ffprobe、mp3tag和audition，都没有找到这个“增益元数据”。你可以随意转一首歌，把转之前和之后的用这个对比听下试试，转出来的声音明显小很多。

HTML代码
14

tasy5kg

@Ta / 07-17 05:06 / 样 / 源

@无名啊，HE-AAC在极低码率下的音质还真不错，明显好于Opus。我用 Fraunhofer FDK 转了一份“~24 kbit/s | HE-AAC v2 | Q 1”的版本，在DEMO里加了一个低音质的选项，大小加起来刚好也是3.7M。
15

无名啊

@Ta / 07-17 19:29 / 样 / 源

@tasy5kg，

都没有找到这个“增益元数据”

转码后文件，丢进转码软件，右键“编辑元数据”，就能看到了
16

tasy5kg

@Ta / 07-18 11:40 / 样 / 源

@无名啊，噢，我找到了，但删除掉这些元数据后，音量和之前没有变化，还是偏小
17

无名啊

@Ta / 07-18 19:08 / 样 / 源

@tasy5kg，你听「吉他.m4a」、「鼓、贝斯.m4a」时，有觉得比原音量大吗？

元数据说，这俩文件的 TRACKGAIN 值，是 > +3 的。。

我这里听，这俩声音也大些。。
18

无名啊

@Ta / 07-18 19:25 / 样 / 源

@tasy5kg，你转码文件时，试试取消「扫描回放增益」（右下角选项 - 取消「扫描响度，包括……」），再看看音量是否和原文件一样大？
19

tasy5kg

@Ta / 07-19 09:26 / 样 / 源

@无名啊，试了，听起来音量仍然变小了，用Audition查看波形图也能看出来。有可能我DEMO里的音频音量本来就比较低，所以听不出区别，你可以转首歌试试

添加新回复

回复需要登录。