HTML本身仅定义结构，无法实现播放控制、事件响应和状态管理；必须用JavaScript操作audio元素的play()、pause()、currentTime等方法，并处理路径、跨域、自动播放策略及移动端限制。
纯 HTML 无法播放音乐，也不支持动态交互（如播放/暂停、进度条、歌单切换）——必须配合 JavaScript 和 <audio> 标签才能实现可操作的音乐网站首页。
为什么只用 HTML 写不出“能听的”音乐网站
HTML 本身只是结构描述语言：<audio> 标签能声明音频资源，但默认控件简陋、样式不可控、事件无法监听；没有 JavaScript，你连“用户点了播放按钮”这件事都捕获不到。常见错误是把 MP3 文件路径直接塞进 <img> 或 <a>，结果点开下载或 404。
-
<audio src="song.mp3" controls></audio>能显示原生播放器，但无法自定义按钮、不响应点击事件、移动端兼容性差（iOS Safari 默认禁用自动播放） - 所有播放逻辑（加载、播放、暂停、音量、进度同步）都得靠 JavaScript 操作
audio元素的play()、pause()、currentTime、volume等属性和方法 - 歌单列表、当前播放高亮、歌词滚动等 UI 状态，必须用 JS 动态更新 DOM，HTML 静态写死就只能看不能动
最简可用的首页结构：HTML + 内联 JS + 基础 CSS
不依赖框架，从零跑通一个可点击播放的首页，重点在结构清晰、资源路径可靠、基础交互闭环。以下代码可直接保存为 index.html 运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的音乐站</title>
<style>
.player { margin: 20px; }
.track-list li { cursor: pointer; padding: 8px; }
.track-list li.active { background: #eee; }
</style>
</head>
<body>
<h1>? 最近喜欢</h1>
<div class="player">
<audio id="main-audio"></audio>
<button onclick="document.getElementById('main-audio').play()">▶ 播放</button>
<button onclick="document.getElementById('main-audio').pause()">⏸ 暂停</button>
</div>
<p><ul class="track-list">
<li onclick="loadTrack('song1.mp3')">晴天 - 周杰伦</li>
<li onclick="loadTrack('song2.mp3')">年少有为 - 李荣浩</li>
</ul></p><p><script>
const audio = document.getElementById('main-audio');
function loadTrack(src) {
audio.src = src;
audio.load(); // 必须调用，否则部分浏览器不触发 canplay
audio.play().catch(e => console.warn('自动播放被阻止:', e));
}
</script>
</body>
</html>注意：song1.mp3 必须和 HTML 文件在同一目录，或改用相对/绝对路径；audio.load() 是容易漏掉的关键步骤，否则换歌后可能无反应。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：路径、跨域、移动端限制
本地双击打开 HTML 文件（file:// 协议）时，Chrome 等浏览器会因安全策略禁止 <audio> 加载本地音频，表现为静音、报错 DOMException: The element has no supported sources。
- 解决办法：用轻量 HTTP 服务启动，例如 VS Code 安装
Live Server插件，或命令行运行npx http-server - MP3 文件放在子目录（如
/assets/audio/）时，src值必须写对，比如'assets/audio/song1.mp3'，不能漏掉assets/ - iOS Safari 和新版 Android Chrome 默认禁止自动播放（含
audio.play()无用户手势触发），所以首次播放必须由用户点击按钮发起；后续换歌才可直接play() - 如果音频文件托管在其他域名（如七牛、S3），需确保服务端返回
Access-Control-Allow-Origin: *，否则 JS 读取duration或currentTime会失败
下一步该加什么，而不是怎么“美化”
很多教程一上来就教 CSS 动画、渐变背景、唱片机旋转，但实际卡住开发的是数据流和状态管理：当前播哪首？进度条怎么随时间更新？上一首/下一首怎么跳？这些不是样式问题，是 JS 逻辑问题。
建议优先补全：audio.ontimeupdate 监听进度、audio.onended 处理自动下一首、用数组存歌单并维护 currentTrackIndex、把 loadTrack() 改成接受索引而非路径——这些才是让首页真正“运转”起来的骨架。CSS 样式可以最后套，但播放链路断了，再好看的按钮也点不响。
