<audio>标签无反应主因是路径错误、file://协议限制及移动端策略，需用本地服务、校验MIME类型、加preload属性，并通过JS捕获play()异常、监听loadedmetadata设进度条max、区分ended与seeking事件。
直接用 <audio> 标签加 controls 属性就能跑起来，但多数人卡在“点了没声音”或“进度条不动”，问题不在代码写错，而在路径、协议、移动端限制这三处。
为什么写了<audio>却没反应
最常见的是资源根本没加载成功——浏览器控制台里出现 net::ERR_FILE_NOT_FOUND 或 404 就是铁证。
- 本地双击打开 HTML 文件（
file://协议）时，Chrome / Edge 默认禁止加载本地音频，必须起本地服务：比如终端执行python3 -m http.server，然后访问http://localhost:8000 - 相对路径以 HTML 文件位置为基准，不是 JS 或 CSS 文件位置。比如
src="music/song.mp3"，要确认music/目录真在 HTML 同级目录下，且文件名大小写完全一致（macOS/Linux 区分大小写） - 服务器没配 MIME 类型：Nginx 需加
types { audio/mpeg mp3; }；Apache 要确保mp3关联到audio/mpeg
controls 属性不是万能的
加了 controls 确实能出按钮，但样式不可控、无法读取当前播放时间、不能拖拽跳转、也不能记住音量——这些都得靠 JS 补。
-
preload="metadata"建议加上，避免页面一开就加载整首歌（尤其 >5MB 的 MP3） -
autoplay在现代浏览器基本失效，除非同时加muted，且仍受移动端限制（iOS Safari 完全无视 autoplay） - 想自动播背景音？唯一可靠方式是监听一次用户点击：
document.addEventListener('click', () => audio.play(), { once: true })
自定义播放按钮的最小安全写法
别直接调 audio.play()，得捕获可能的拒绝错误，否则控制台报错、功能中断。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 检查状态再操作：
if (audio.paused && audio.readyState >= 2)，其中readyState === 2表示至少有足够数据可开始播放 - 用
.catch()捕获 Promise 拒绝：audio.play().catch(e => console.warn('play failed:', e)) -
ended事件只在自然播完触发；用户拖到末尾不会触发，如需“停止”逻辑，得监听pause+timeupdate（配合currentTime === duration）
进度条和音量控制最容易踩的坑
看似只是改两个属性，实际涉及事件时机、取值范围、平台限制三重约束。
-
<input type="range">的max必须在loadedmetadata后设为audio.duration，否则初始为 0，拖动无效 -
currentTime设为负数或超duration会被自动截断，不报错但也不触发seeked，得手动监听seeking/seeked同步 UI -
volume取值范围是 0–1；设成 1.5 会被强制归为 1；muted = true优先级高于volume - iOS Safari 禁止 JS 修改
volume，代码设置无效，只能靠系统音量键
真正麻烦的从来不是写几行 JS，而是不同浏览器对同一事件的响应差异、移动端手势触发的边界条件、以及音频加载状态的不确定性——这些没法靠“复制粘贴代码”绕过，得在每一步操作前加状态判断。
