不能直接用<audio controls>做列表播放器，因其仅控制单个实例，缺乏切换歌曲、高亮当前项、记忆播放位置等功能，多实例易导致冲突与自动播放失败。
为什么不能直接用 <audio controls> 做列表播放器
浏览器原生 <audio controls> 只控制单个实例，它没有“切换歌曲”“高亮当前项”“记住播放位置”这些能力。一旦你点击第二首歌的按钮，第一首不会自动暂停，甚至可能同时发声。
常见错误现象：audio.play() 被多次调用后，部分浏览器（尤其是 iOS Safari）会静音，或抛出 NotAllowedError: play() failed because the user didn't interact with the document first。
- 只保留一个
<audio id="main-audio">元素，所有播放操作都指向它 - 点击列表项时，先执行
audio.src = newSrc，再调用audio.load()，最后audio.play() -
audio.load()不可省略 —— 否则换歌后第一次play()可能失败或延迟，尤其在 MP3 文件未完全加载时
怎么组织 HTML 音乐列表 DOM 结构
音频列表需手动构建 DOM 结构，用 <div class="track"> 存元数据，单个 <audio> 实例配合 JS 控制播放、高亮与状态同步，避免多实例冲突和自动播放失败。
<audio> 元素本身不提供列表能力，所有“音乐列表”必须用 <ul>、<ol> 或 <div> 手动构建，再靠 JS 绑定播放逻辑 —— 这是初学者最容易卡住的第一步。
立即学习“前端免费学习笔记（深入）”；
- 外层用
<div id="playlist">或<section aria-label="音乐列表">包裹，避免用<ul>单纯为了“看起来像列表” - 每首歌用
<div class="track" data-title="晴天" data-artist="周杰伦" >，把关键元数据塞进data-属性 - 播放按钮统一用
<button type="button" class="play-btn">，加type="button"防止表单意外提交 - 不要把
<audio>嵌在每个.track里 —— 多个实例会争抢系统音频资源，且无法共享状态（如当前播放项高亮）
列表项高亮与状态同步怎么做
高亮不是靠 CSS 伪类自动完成的，必须手动管理 DOM 状态。核心逻辑是：播放哪首，就给对应 .track 加 active 类，同时移除其他项的该类。
监听 main-audio 的 play 事件不够 —— 它只告诉你“开始播了”，但不知道播的是哪首；应该在 JS 播放前就标记目标项。
- 推荐绑定点击事件到
.play-btn上，而不是整个.track—— 避免误触（比如点到歌名想复制文字，结果触发播放） - 示例关键片段：
document.querySelectorAll('.play-btn').forEach(btn => { btn.addEventListener('click', () => { const track = btn.closest('.track'); const src = track.dataset.src; const audio = document.getElementById('main-audio'); audio.src = src; audio.load(); audio.play(); document.querySelectorAll('.track').forEach(t => t.classList.remove('active')); track.classList.add('active'); }); });
MP3 格式兼容性与 fallback 处理
MP3 在 Safari、IE9+、Chrome、Firefox、Android 浏览器中支持良好，但 Ogg 和 WAV 是必要的补充格式，尤其对 Firefox 和旧版 Android。
仅用 src 属性加载单个 MP3 文件，在部分 Firefox 或 Opera 中可能静音或报错；正确做法是用 <source> 标签提供多格式 fallback。
- 结构应为：
<audio id="main-audio"> <source src="music/qingtian.mp3" type="audio/mpeg"> <source src="music/qingtian.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
-
type属性不是可选的 —— 它帮助浏览器跳过不支持的格式，加快加载判断 - 不要依赖
canplaythrough事件做 UI 启用 —— 它可能永远不触发；改用loadedmetadata+duration判断是否可用
真正麻烦的不是写播放逻辑，而是让同一首歌在 iOS Safari、Chrome Android、Firefox Desktop 上都响得出来，且不卡顿、不静音、不丢状态 —— 这些细节堆起来，才是实际交付时最耗时间的部分。
