仅用标签无法实现功能完备的播放器，需JS补足拖拽、音量记忆等功能；常见失效原因包括路径错误、MIME类型未配置、跨域限制及移动端自动播放限制。
直接用 <audio></audio> 标签能做出可操作的播放器，但默认控件简陋、样式不可控、不支持拖拽进度或音量记忆——得靠 JS 补足，不是加个 controls 属性就完事。
audio 标签基础写法与常见失效原因
最简可用结构是：<audio src="music.mp3" controls></audio>。但实际常卡在资源加载失败上：
-
src路径错误（相对路径没对齐 HTML 文件位置，建议用开发者工具 Network 面板看 404 请求） - 服务器未配置正确的 MIME 类型（
.mp3应返回audio/mpeg，Nginx/Apache 需手动加） - 跨域限制（本地双击打开 HTML 时，Chrome 会拒载
file://协议下的音频，必须起本地服务） - 移动端 Safari 默认禁自动播放，
autoplay属性无效，且首次播放必须由用户手势触发（如 click）
用 JS 控制播放/暂停与监听状态变化
原生 <audio></audio> 提供了完整 API，但事件名和行为容易混淆：
-
play()和pause()是方法，不是属性；调用前最好检查audio.readyState >= 2（表示已有足够数据可播放） -
ended事件只在自然播完时触发，用户拖拽到末尾不会触发；想监听“停止播放”，应同时捕获pause、ended、timeupdate（配合currentTime === duration） -
canplaythrough比loadeddata更可靠——它表示整个文件已缓冲完成，适合做“准备就绪”提示
示例：安全播放按钮逻辑
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
const audio = document.querySelector('audio');
document.getElementById('playBtn').addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('Playback failed:', e));
} else {
audio.pause();
}
});
自定义进度条与音量控制的坑
拖拽进度条本质是改 audio.currentTime，但直接赋值后需监听 seeking 和 seeked 事件来同步 UI：
-
currentTime设为超出范围的值（如负数或大于duration）会被自动截断，不报错但也不触发seeked -
volume取值范围是 0–1，设为 1.5 不会变更大声，而是被强制设为 1；静音状态（muted = true）优先级高于volume - 移动端 iOS Safari 禁止 JS 修改
volume，只能通过系统音量键控制，代码设置无效 - 进度条
<input type="range">的max值应在loadedmetadata后设为audio.duration，否则初始为 0，拖动无效
为什么不能只靠 HTML 属性实现“简易但可用”
因为浏览器默认控件不暴露内部状态，比如你无法知道当前是否处于缓冲中（networkState === 2）、也无法阻止右键另存为、更没法在播放中动态切换音源而不中断——这些都得靠监听 audio 元素的原生事件 + 手动维护状态变量。最易被忽略的是：所有时间相关操作（如倒计时显示、定时跳转）必须依赖 timeupdate 事件，但它触发频率不固定（通常 200–250ms 一次），别拿它当高精度时钟用。
