用HTML <audio> 标签搭配基础 JavaScript 可构建轻量网页音乐播放器：通过 data-src 存储音频路径，点击列表项切换歌曲并自动播放，支持自动暂停上一首、播放结束播下一首及空格键控制。
用 HTML `
准备音频文件与基础结构
确保所有音频文件（如 MP3）放在同一目录下，或使用可访问的网络路径。HTML 页面中先写一个播放器容器和歌曲列表：
- 用 `
- 用 `
- ` 列出歌曲，每项 `
- ` 包含歌名，并通过 `data-src` 属性存对应音频路径
- 给播放器加 `id="player"`，方便 JS 获取；列表加 `id="playlist"` 便于绑定点击事件
点击切换歌曲的核心逻辑
监听列表项的点击，把被点歌曲的 `data-src` 赋给 `
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- JS 中用 `document.getElementById('playlist').addEventListener('click', ...)` 捕获点击
- 判断点击目标是否为 `
- `，提取 `e.target.dataset.src`
- 设置 `audioEl.src = src; audioEl.load(); audioEl.play();`
- 可选：点击后高亮当前项（如加 class），并移除之前高亮
增强体验的小改进
让播放器更实用，只需几行额外代码：
立即学习“前端免费学习笔记（深入）”；
- 自动暂停上一首：每次新播放前，检查 `audioEl.duration` 是否大于 0，执行 `audioEl.pause()`
- 播放结束自动播下一首：监听 `audioEl.addEventListener('ended', ...)`，找到当前 `
- ` 的下一个兄弟节点，模拟点击
- 支持空格键播放/暂停：监听 `document.addEventListener('keydown', e => { if (e.code === 'Space') { e.preventDefault(); audioEl.paused ? audioEl.play() : audioEl.pause(); } })`
样式与兼容性提醒
默认控件在各浏览器中显示一致，但若想自定义外观，需隐藏原生控件（`controls=false`），自行用按钮+进度条+JS 控制，复杂度明显上升。初版建议保留原生控件。注意：Safari 在非用户手势触发时禁止自动播放音频，所以必须由点击等交互启动播放，这点已由上述点击逻辑满足。
