HTML音频兼容不同设备的设置技巧-html教程-PHP中文网

iOS/Android WebView/旧版Firefox中audio标签静音也不播，主因是source顺序、type值错误或服务器MIME未配置；autoplay muted失效则因muted必须为布尔属性、volume需为0且需用户手势触发。

html音频兼容不同设备的设置技巧

audio 标签在 iOS Safari、Android WebView、旧版 Firefox 上静音也不播，大概率不是代码漏了 controls，而是 source 顺序、type 值或服务器 MIME 配置错了——这些地方一错，浏览器直接跳过加载，连错误都不报。

为什么写了 `autoplay muted` 还是没声音

现代浏览器（Chrome ≥66、Firefox ≥66、Safari ≥12.1）只允许「真正静音」的自动播放，且必须满足三个硬条件：

muted 是布尔属性，写成 muted="true" 或 muted="false" 都无效；必须是 muted 或空值 muted=""
volume 得是 0（JS 设置 audio.volume = 0 不足以绕过策略，muted 属性才是开关）
iOS Safari 要求用户已触发过手势（哪怕只是点空白处），否则即使 muted 也静默失败；微信 iOS WebView 同样严格

实操建议：删掉 autoplay，改用按钮点击触发 play()，并加 .catch() 捕获拒绝原因：

button.addEventListener('click', () => {
  audio.play().catch(e => {
    if (e.name === 'NotAllowedError') {
      console.warn('用户未交互，自动播放被拒');
    }
  });
});

`source` 的 type 值和顺序怎么写才不白写

浏览器按 DOM 顺序逐个尝试 source，遇到第一个 canPlayType() 返回 "probably" 或 "maybe" 的就停。但 canPlayType() 不可靠，静态 fallback 才是底线。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

MP3 必须写 type="audio/mpeg"，type="audio/mp3" 是无效值，Safari 直接忽略
OGG 推荐 Vorbis 编码（不是 Opus），用 ffprobe a.ogg 确认输出含 Audio: vorbis
顺序按兼容性降序：MP3 放最前（覆盖 Chrome/Firefox/Edge/Android），OGG 第二（补 Firefox/Chrome），WAV 最后仅作极短提示音兜底（iOS Safari 对 audio/wav 支持比 OGG 更稳）
别加 type="audio/opus" —— 虽然 Chrome/Firefox 支持，但 Safari 完全不识别，反而占一个失败尝试位

服务器没配 MIME 类型，`audio` 就是摆设

即使 source 写得再全，如果响应头里 Content-Type 是 text/plain、application/octet-stream 或为空，浏览器会当普通文件扔掉，不调用解码器。

Apache：在 .htaccess 或虚拟主机配置中加 AddType audio/mpeg .mp3、AddType audio/ogg .ogg
Nginx：在 types 块里补 audio/mpeg mp3;、audio/ogg ogg;
本地开发别双击 HTML 文件——file:// 协议下 Chrome/Firefox 禁用音频加载，必须起服务：python3 -m http.server 8000
检查方式：打开 Network 面板，点音频请求 → 查 Response Headers → 确认 Content-Type 准确匹配后缀与编码

采样率选 44.1kHz 还是 16kHz？看内容类型

采样率不是越高越好，它和编码格式、设备解码能力强绑定：

语音类（TTS、客服播报、单词跟读）：优先用 16kHz —— 文件体积小 64%，加载快，低端 Android 解码更稳，Web Audio API 初始化不易崩
音乐类（背景乐、音效集）：用 44.1kHz，但 WAV 文件若为 32-bit float 或 big-endian，iOS Safari 会静音；MP3 则无此问题
避坑点：32kHz、24.5kHz 等非标准值在 Safari 和旧 WebView 上支持极差；96kHz 必须转 MP3(CBR) 或 AAC(.m4a)，放弃 WAV

真正难的不是选哪个值，而是你没法靠 JS 动态判断设备支持什么采样率——所以得靠多格式 fallback + 服务端预转码，而不是前端猜。