HTML列表标签仅提供结构容器，播放列表功能需结合元素与JavaScript实现：用或构建条目，data-属性存歌曲信息，单个配合JS切换src并调用load()和play()，避免多或误用。

HTML列表标签本身不能直接“制作”音乐播放列表，它只是提供结构容器。真正实现播放列表功能，靠的是用 <ul></ul> 或 <ol></ol>（或语义更合适的 <div>）手动搭建可视列表，再配合单个 <code><audio></audio> 元素和 JavaScript 控制切换与状态——这是最轻量、兼容性最好、也最符合现代浏览器策略的做法。

用

或
构建可交互的歌曲条目
列表不是浏览器自动生成的，必须自己写 DOM。推荐结构清晰、便于 JS 操作的写法：
• 外层用 <section aria-label="音乐列表"></section> 或 <div id="playlist"> 包裹，比单纯套 <code><ul></ul> 更语义化且易控制
• 每首歌用 <li class="track"> 或 <div class="track">，把关键信息存进 <code>data- 属性，比如：
  <div class="track" data-title="晴天" data-artist="周杰伦">晴天 - 周杰伦</div>
• 播放按钮统一用 <button type="button" class="play-btn"></button>，避免表单误提交
• 不要在每个条目里放一个 <audio></audio> —— 多实例会抢资源、不同步、难管理

为什么不能靠 标签实现多首歌切换

<source></source> 的作用是为同一首歌提供多种格式备选（如 mp3 + ogg），不是用来塞多首歌的。浏览器只会加载第一个能播的，其余被忽略。

• 把 10 首歌全写进同一个 <audio></audio> 的多个 <source></source> 里，实际只生效第一项
• 想换歌，必须用 JS 改 audio.src 或替换 <source></source> 的 src，然后调 load() 再 play()
• 漏掉 load() 容易导致 Safari iOS 静音、Chrome 播放失败或延迟

列表高亮与播放状态必须手动同步

浏览器不会自动标记“当前播放项”，高亮完全靠 JS 管理：


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载

立即学习“前端免费学习笔记（深入）”；

• 点击某首歌时，在调 play() 前，先给对应 .track 加 active 类，同时移除其他项的该类
• 监听 play 事件不够用——它不告诉你播的是哪一首；要靠点击时就锁定目标元素
• 绑定事件到按钮上，而不是整个 .track 区域，防止误触（比如点歌名想复制文字）
• 暂停/停止时，记得清除 active 类，或加 paused 类做视觉区分

移动端和 Safari 的几个硬约束要绕开

iOS Safari 对音频控制极严，很多 JS 操作无效，得用替代方案：

• audio.loop = true 和 audio.volume = 0.5 在 iOS 上基本不起作用；循环得靠监听 ended 后手动 currentTime = 0; play();
• autoplay 几乎必然失败，别依赖它切下一首；用户点击后，用 ended 事件触发下首 play()
• preload 设成 "none" 或 "metadata" 更稳妥，"auto" 在列表页容易白耗带宽
• 所有 play() 必须由用户手势（click/touchstart）直接触发，不能藏在异步回调里