audio标签必需src属性才能加载音频，且推荐始终添加controls属性；静音自动播放需同时设置muted和autoplay，且用户首次交互后才可解除静音；iOS Safari要求audio标签位于body直系子元素且不可被隐藏。

audio 标签基础写法与必需属性

必须提供 src，否则音频不会加载；没有 controls 属性时，用户无法手动播放或调节音量，页面上也不会显示任何控件。浏览器对不带 controls 的 audio 元素通常完全静默（即使设置了 autoplay，现代浏览器也大概率拦截）。

最简可用写法：

<audio src="music.mp3" controls></audio>

• src 必须是可访问的相对或绝对路径，不能是本地文件系统路径（如 file:///...），否则在多数浏览器中会因安全策略失败
• 建议始终加上 controls，方便调试和用户交互；若真需隐藏控件，用 CSS 隐藏比省略更可控
• 支持的格式因浏览器而异，.mp3 兼容性最好，.ogg 和 .wav 可作为备选

启用循环和静音的关键属性组合

loop 和 muted 是布尔属性，写上即生效，无需赋值。但要注意：仅加 muted 不等于“静音后可自动播放”——Chrome/Firefox 等要求 muted + autoplay 同时存在，才允许静音自动播放；否则即使 muted 存在，autoplay 仍会被阻止。

常见静音循环自动播放写法：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

<audio src="bgm.mp3" muted loop autoplay controls></audio>

• loop 表示播放完立即重头开始，不触发 ended 事件（但会触发 timeupdate）
• muted 是硬性静音，无法通过 JS 修改为 false 后再调用 play() 恢复声音（除非用户已有交互，如点击过页面）
• autoplay 单独使用基本无效，必须搭配 muted 才可能成功

用 JavaScript 动态控制播放状态的注意事项

直接调用 play() 或修改 muted、loop 属性时，浏览器有严格限制：若用户尚未与页面产生任何交互（如 click/touch/key），大部分操作会被拒绝并抛出 DOMException: play() failed because the user didn't interact with the document first。

• 初始化时设 muted="true" + autoplay 是绕过该限制的常用方式
• 用户首次点击后，可安全执行 audio.muted = false 并调用 play() 解除静音
• loop 属性可通过 JS 动态切换：audio.loop = true，但切换时机不影响当前播放状态
• 不要依赖 canplay 或 loadeddata 就立刻 play()，仍需确保用户已交互

移动端 Safari 的特殊行为

iOS Safari 对 audio 标签限制最严：即使写了 muted autoplay，若音频未嵌入 body 直接子节点、或被包裹在 display: none / visibility: hidden 容器中，也可能无法自动播放。

• 务必把 audio 标签放在 body 下层，避免深嵌套或隐藏父容器
• 不要用 opacity: 0 或 transform: scale(0) 隐藏，改用 position: absolute; left: -9999px 这类不影响播放能力的隐藏方式
• Safari 不支持 play() 返回 Promise，所以 play().then(...).catch(...) 在 iOS 上不可靠，应监听 playing 或 pause 事件判断状态

实际项目里，最易忽略的是用户交互时机和 iOS 的 DOM 位置约束——这两点不满足，其余属性配得再全也没用。