HTML个人主页怎么插入音频？特色背景声配置一览-html教程-PHP中文网

audio标签必须显式添加controls属性才能显示播放控件，否则完全隐身；src路径需正确（相对或绝对URL），推荐用提供mp3、ogg、wav多格式回退并写对type值；autoplay需配合muted才可能生效，且JS播放必须由用户手势触发并处理Promise错误。

html个人主页怎么插入音频？特色背景声配置一览

audio 标签不加 controls 就等于没放

很多人写完 <audio src="bgm.mp3"></audio> 刷新页面，什么都没看到，以为代码错了。其实不是加载失败，是它根本“隐身”了——没有 controls 属性，浏览器连播放按钮都不渲染，用户既看不到、也点不了、更没法判断是否加载成功。

真正能立刻验证的最小结构只有这三样：src（路径必须对）、controls（必须显式写上）、以及一个可访问的音频文件。其他属性如 autoplay、loop 全部可选，但少了 controls，就等于没加音频。

路径必须是相对路径（如 "./audio/bgm.mp3"）或绝对 URL（如 "https://cdn.example.com/bgm.ogg"），不能只写 "bgm.mp3" 或 "C:\music\bgm.mp3"
直接双击 HTML 文件打开时，Chrome/Firefox 会因 file:// 协议拒绝加载音频；用 python -m http.server 起个本地服务就能绕过
控制台报 404 或 ERR_FAILED，90% 是路径大小写错误、文件没放对位置、或服务器没配好 MIME 类型

MP3 播不了？别怪浏览器，怪你只写了一个 source

Firefox 默认不支持 MP3 解码，Safari 对 OGG 更友好，iOS 微信内置浏览器甚至会跳过没写 type 的 <source></source>。只放一个 .mp3，相当于主动放弃 20%+ 的真实用户。

正确做法是用 <source></source> 提供多格式回退，浏览器按顺序尝试，遇到第一个支持且可加载的就停：

<audio controls><source src="bgm.mp3" type="audio/mpeg"><source src="bgm.ogg" type="audio/ogg"><source src="bgm.wav" type="audio/wav">
  您的浏览器不支持 audio 元素。
</source></source></source></audio>

type 属性不能省，也不能写错："audio/mp3" 是无效值，必须是 "audio/mpeg"（MP3）、"audio/ogg"（OGG）、"audio/wav"（WAV）
.mp3 体积适中、兼容广，适合主用；.ogg（Vorbis）压缩率高、开源免费，Firefox/Chrome/Edge 均原生支持；.wav 仅建议用于几秒内的提示音
HTTP 服务器若未返回正确的 Content-Type 响应头，没写 type 的 <source></source> 很可能被浏览器直接忽略

autoplay 不响？不是 bug，是浏览器策略强制静音

加了 autoplay 却没声音，不是代码问题，是现代浏览器（Chrome 94+、Safari、iOS WebView）统一执行的 Autoplay Policy：未经用户交互，禁止播放有声媒体。强行加 autoplay 只会触发控制台警告，甚至直接失败。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

唯一稳定生效的方式是配合 muted：

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

muted 是布尔属性，写了就生效，不需要 muted="true"
即使你后续用 JS 执行 audio.muted = false，也得先确保音频已进入可播放状态（监听 canplay 或 loadeddata 事件）
iOS Safari 最严格：首次播放必须由用户点击/触摸触发，autoplay muted 在 iOS 上也可能被忽略，必须准备 fallback 按钮

想用 JS 控制播放？别在 onload 里调 play()

常见错误是把 audio.play() 放在 DOMContentLoaded、window.onload 或 setTimeout 里，结果报错：DOMException: play() failed because the user didn't interact with the document first。

浏览器只认“真实用户手势”，比如 click、touchstart、keydown（非自动触发）。安全写法是绑定到用户可点击的元素上：

const audio = document.querySelector('audio');<br>document.getElementById('playBtn').addEventListener('click', () => {<br>  audio.play().catch(e => console.warn('播放被拒:', e));<br>});