仿网易云音乐官网不推荐——其重度依赖react+webpack+动态css-in-js，静态html无法复现交互、加密音频播放及状态管理；纯html+css仅宜模拟视觉骨架（如顶部导航、左侧菜单、主内容区），需规避404路径、防盗链、autoplay限制等问题。
直接仿网易云音乐官网的 HTML 布局，不推荐——它重度依赖 React + Webpack + 动态 CSS-in-JS，静态 HTML 无法复现交互和资源加载逻辑，强行“仿”只会卡在 404 音频路径、缺失 playbackRate 控制、侧边栏折叠状态丢失这些地方。
用纯 HTML+CSS 模拟播放器主结构（非可运行版）
如果你只是想练习布局、理解 DOM 层级或做静态演示稿，可以提取其视觉骨架：顶部导航栏 + 左侧菜单栏 + 主内容区（含专辑封面、歌单列表、进度条容器）。重点不是“像不像”，而是“层级是否合理”。
-
<header></header>包住 logo、搜索框、用户头像 —— 注意网易云实际用的是position: fixed+z-index: 100，但静态页别急着加，先保证流式布局不塌 - 左侧菜单用
<nav></nav>，每个菜单项是<a href="#"></a>，不要写真实跳转链接（否则刷新后丢失状态） - 主区域用
<main></main>，里面嵌套<section class="playlist"></section>和<div class="player-bar"> —— 后者必须放在最外层 <code>底部，否则滚动时会消失audio 标签根本播不了网易云的 m4a/MP3？
网易云所有音频都是加密的
.m4a，且带防盗链（Referer校验 + token 签名），你用<audio src="https://m701.music.126.net/..."></audio>一定会触发net::ERR_FAILED。本地开发时唯一可行方案是：用自己能控制的音频文件。- 把测试音频放项目根目录下，比如
/audio/test.mp3，然后<audio src="./audio/test.mp3"></audio> - 禁用浏览器缓存调试：Chrome 开发者工具 → Network → 勾选 “Disable cache”
- 如果仍报
DOMException: The element has no supported sources，检查 MIME 类型是否被服务器正确返回（本地双击打开 HTML 时，file://协议下 audio 可能被禁用，必须起本地服务）
为什么你的“仿网易云”在 Safari 里进度条拖不动？
因为 Safari 对
<input type="range">的change事件触发时机更严格，且默认禁用audio.play()的自动调用（需用户手势触发）。网易云实际用了webkitAudioContext+ 自定义波形渲染，你用原生<input>拖动时没绑定input事件（只绑了change），就会卡住。- 必须同时监听
input（实时拖动）和change（松手确认）两个事件 -
audio.currentTime赋值后，要 catchPromise拒绝：audio.play().catch(e => console.warn("Autoplay prevented:", e)) - 不要在页面加载完立刻
audio.play()，等用户点击一次播放按钮后再启用自动播放逻辑
真正难的不是写出一模一样的 HTML 结构，而是搞懂哪些是“前端能控的”，哪些是“服务端/客户端专属的”。比如右键菜单、歌词滚动同步、音效均衡器——这些全靠网易云自己的 SDK，HTML 里写再多
div也没用。 - 把测试音频放项目根目录下，比如
