直接双击打开HTML文件时，加载失败报错“Not allowed to load local resource”，是因为Chrome/Firefox等浏览器出于安全策略禁止file://协议下加载本地音频资源；唯一可靠解法是使用本地HTTP服务器（如VS Code Live Server或Python http.server）运行页面，而非直接用file://协议访问。
为什么直接用 <audio></audio> 标签放歌单会卡顿或无法自动播放
浏览器对自动播放有严格限制：除非用户已与页面交互（如点击），否则 autoplay 属性大概率被静音拦截，甚至完全不触发。更常见的是，多个 <audio></audio> 标签同时加载（比如歌单里 20 首歌全写上 preload="auto"），会瞬间发起大量 HTTP 请求，拖慢页面、耗尽连接数，尤其在移动网络下极易失败。
实操建议：
- 只保留当前要播的那一个
<audio></audio>元素，其他歌曲用纯 JSON 或数组存路径和元数据，动态src赋值 - 把
preload设为"metadata"（只加载时长、封面等基础信息），避免预加载整首音频文件 - 首次播放必须由用户真实点击触发（例如“播放”按钮），之后再调用
play()才能成功 - 监听
canplay而非loadeddata，前者表示可开始播放，后者可能等不到
怎么用 JavaScript 控制上一首/下一首并同步更新 DOM 显示
核心不是靠一堆 <audio></audio> 标签切换显示，而是维护一个索引 currentIndex，用它查数组里的歌曲对象，再更新 <audio></audio> 的 src 和页面上的歌名、歌手、进度条等。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 没清空上一首的
timeupdate监听器，导致多个监听器叠加，进度跳变或卡顿 - 切换歌曲后没重置
<audio></audio>的currentTime = 0，新歌从旧位置开始播 - 没处理循环逻辑：到最后一首点“下一首”时，应跳回第一首（
currentIndex = (currentIndex + 1) % songs.length） - DOM 更新和
src设置顺序错乱——先改src，等canplay触发后再更新歌名，避免显示“未知歌曲”闪一下
如何让播放器支持键盘快捷键（空格暂停、→ 快进 10 秒）
关键不是监听所有按键，而是限定作用域：只在播放器区域获得焦点（或页面有播放状态）时响应，避免和输入框、搜索栏冲突。
实操要点：
- 用
document.addEventListener('keydown', handler)，但handler里加判断：if (event.target !== document.body && event.target.tagName !== 'BODY') return，防止焦点在 input 里时误触发 - 空格键需
event.preventDefault()，否则会触发页面滚动 - 快进/快退别直接改
currentTime += 10，先检查audio.duration是否已知（NaN 表示还没加载完），否则设了也没用 - Mac 用户可能按
Cmd+→，Windows 是Ctrl+→，统一用方向键更稳妥
为什么本地双击打开 HTML 文件时，<audio></audio> 加载失败报错 “Not allowed to load local resource”
这是 Chrome/Firefox 的安全策略：本地文件协议（file://）下，浏览器禁止通过 JS 加载本地音频文件（哪怕路径写对了），会直接抛出 CORS 类似错误，控制台显示 Not allowed to load local resource。
绕过方法只有两个：
- 用轻量本地服务器启动页面：VS Code 安装
Live Server插件，右键 HTML 文件选“Open with Live Server”，地址变成http://127.0.0.1:5500/xxx.html，问题消失 - 用 Python 快速起服务：
python3 -m http.server 8000（Python 3）或python -m SimpleHTTPServer 8000（Python 2），然后访问http://localhost:8000 - 不要尝试用
chrome --disable-web-security，新版 Chrome 已不支持该参数，且极度不安全
这个限制非常硬，没别的取巧办法。只要看到 “local resource” 错误，第一反应就是换 HTTP 服务跑，而不是折腾路径写法或 MIME 类型。
