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

1 .

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

更：还用了 VS Code 内置的 Copilot

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

4 .

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

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

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

截屏2025-07-17 01.07.32.avif（80.4 KB）

截屏2025-07-17 01.07.02.avif（87.94 KB）

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

6 .

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

out.avif（54.15 KB）

7 .

@tasy5kg，用 js 同时播放一楼 5 个音频，感觉效果听起来还行。。

document.querySelectorAll('ul.comments-ul > li:first-child audio').forEach(n => n.load() || n.play())

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

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

9 .

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

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

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

10 .

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

11 .

@无名啊，Gemini 当时说：

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