音乐播放器代码生成

功能

• 每行一首「标题|地址」，主色竖线与制表符也当分隔符（中文输入法与从表格复制）
• 产物自包含：一个 `<audio>` + 一个 `<ol>` 列表 + `<style>` + `<script>`，无依赖
• 脚本初始化页面上所有 `.mp`，同页粘两份也能各跑各的
• 播完一首自动下一首，最后一首停下（或按 loop 单曲循环）
• 标题与地址只进 `data-` 属性 —— 数据不经过 JS 源码，少一层转义要管
• 标题与地址里的引号、尖括号、& 都做 HTML 转义
• 主题色用于列表选中态，文字色按对比度算出黑或白（不写死白字）
• 拒绝 javascript: 这类伪协议地址（会被原样写进生成的页面）

使用方法

1. 每行写一首：「标题|音频地址」，只写地址也行
2. 按需要开关播放列表、自动播放、单曲循环，选预加载策略
3. 选一个主题色
4. 复制生成的 HTML，粘到自己页面的任意位置

常见问题

自动播放为什么常常没反应？

因为浏览器默认拦截带声音的自动播放 —— 用户没交互就出声被认为是骚扰（也因此这个选项默认关）。生成的代码里那一句写的是 `audio.play().catch(() => {})`：拦下来时吞掉异常，而不是让控制台报一个 NotAllowedError。真要自动播放，给 `<audio>` 加上 `muted` 属性即可（静音自动播放是允许的），再让用户自己点开声音。

为什么不用 `<audio>` 自带的多文件能力，而要自己写列表？

因为 `<audio>` 没有这个能力 —— 它只播一个 `src`。HTML 里没有任何原生元素能做播放列表（`<video>` 也不行）。所以列表由一小段脚本驱动：点某一项就换 `src` 并播放，播完自动切下一首。这也是为什么产物里必须带脚本，而不只是标签。

同一页放两个播放器会互相干扰吗？

不会。生成的脚本遍历 `document.querySelectorAll(".mp")`，找到的每个播放器各自维护自己的 `<audio>` 与列表，所以粘两份、十份都各跑各的。它们不会互斥播放（一个开始另一个不会自动停），需要那种行为得自己加几行 —— 生成器不替你做这个决定。

音频文件有什么要求吗？

浏览器原生的 `<audio>` 支持 MP3、AAC/M4A、WAV、FLAC 与 Opus（各家略有差别，MP3 与 M4A 最稳）。它不支持流媒体协议（HLS / DASH）—— 那是 `<video>` 配 JS 库才能做的事。另外地址必须是 http(s)://、`//` 开头或同站相对路径；跨域音频可以播放，但要做波形可视化之类的处理就需要对方允许 CORS。