HTML中怎么插入音频？新手基础操作指南-html教程-PHP中文网

audio标签需同时具备controls属性和有效src路径才能显示播放器；漏写controls则完全隐形，src必须为相对或绝对URL，file://协议下需本地服务，多格式回退需正确type值，autoplay须配合muted，JS播放须在用户手势事件中调用。

html中怎么插入音频？新手基础操作指南

audio 标签必须带 controls 和有效的 src，否则音频“存在但不可见、不可操作”——这不是 bug，是规范行为。

为什么加了 `audio` 却看不到播放器？

最常见原因是漏了 controls 属性。不写它，浏览器默认不渲染任何界面元素，哪怕音频已加载成功，用户也点不了、拖不了、调不了音量。

<audio src="song.mp3"></audio>：完全隐形，控制台无报错，但等于没放
<audio src="song.mp3" controls></audio>：立刻显示原生播放条（含播放/暂停、进度、音量）
路径必须是相对路径（如 "./audio/intro.mp3"）或绝对 URL（如 "https://cdn.example.com/sound.ogg"），不能是 "intro.mp3" 或 "C:\music\song.mp3"
本地双击 HTML 文件时，Chrome/Firefox 会因 file:// 协议拒绝加载音频；用 python -m http.server 起个本地服务即可解决

MP3 放进去却播不了？检查格式回退和 `type`

Firefox 默认不支持 MP3；Safari 对 OGG 更友好；只放一个 .mp3 文件，等于主动放弃部分用户。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

用 <source></source> 提供多格式回退：<source src="song.mp3" type="audio/mpeg"></source> + <source src="song.ogg" type="audio/ogg"></source>
type 属性不能省，也不能写错："audio/mp3" 是无效值，必须是 "audio/mpeg"（MP3）、"audio/ogg"（OGG）
Ogg 文件可用 ffmpeg -i input.mp3 -c:a libvorbis output.ogg 免费转码
结尾的提示文字（如“您的浏览器不支持 audio 元素”）不是装饰，是所有 <source></source> 都失败时的降级内容

加了 `autoplay` 却没声音？这是浏览器策略，不是代码错

现代浏览器（Chrome/Safari/Edge/Firefox）全部默认禁止有声自动播放。不加 muted，autoplay 基本无效。

<audio src="bg.mp3" autoplay></audio>：大概率静默失败，控制台可能只有一条警告
<audio src="bg.mp3" autoplay muted></audio>：唯一可能触发自动播放的组合
想实现“点击后有声播放”，必须在用户交互事件中调用 play()，并处理 Promise 拒绝：audio.play().catch(e => console.log(e))
iOS Safari 最严：首次播放必须 muted=true，播成功后再设 muted=false 才能出声

JS 控制播放总报错 `play() failed because the user didn't interact with the document first`？

这不是你的 JS 写错了，是浏览器强制要求“用户手势”作为播放前提。哪怕页面已加载完成，没点击过，play() 就会被拒绝。

确保调用 play() 的时机在用户点击、触摸、键盘输入等事件回调内
不要在 setTimeout、Promise.then 或 load 事件里延迟调用，容易被判定为非手势触发
监听 canplaythrough 而非 loadeddata：前者表示“按当前网速能一路播完”，更可靠；移动端弱网下该事件可能永不触发，建议加 8 秒超时兜底
服务器需返回正确 MIME 类型（如 MP3 文件响应头含 Content-Type: audio/mpeg），否则 play() 可能直接失败