audio标签内纯文本是加载失败时唯一可见的降级提示，必须紧贴闭合标签前、不含任何HTML标签，且需明确失败原因与可操作建议。

audio标签内部文本不是装饰，是fallback失败时的最后提示

浏览器遇到所有都不可用、或根本没写时，会把

备用节点必须写在所有之后，且不能嵌套其他HTML标签

顺序和结构错一点，备用文本就完全不显示。常见错误是把提示写在第一个前面，或者用

包起来：

<audio controls>
  <p>点击播放音频</p> <!-- ❌ 错：p标签会被忽略 -->
  <source src="a.mp3" type="audio/mpeg">
  <source src="a.ogg" type="audio/ogg">
</audio>

正确写法是纯文本紧贴闭合标签前，不带任何HTML标签：

<audio controls>
  <source src="a.mp3" type="audio/mpeg">
  <source src="a.ogg" type="audio/ogg">
  您的浏览器不支持音频播放，或音频文件加载失败。
</audio>

• 文本必须位于所有之后、
• 不能含、

  等内联标签，否则整个备用内容被浏览器丢弃</li><li>即使只写一个空格，也会让浏览器认为“有内容”，从而在失败时显示它</li></ul><H3>提示文案要兼顾技术失败和用户操作引导</H3><p>只写“不支持”太模糊，用户不知道该刷新、换浏览器，还是网络问题。建议包含两层信息：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><ul><li>明确失败原因（如“音频文件未找到”“格式不被支持”）</li><li>给出可操作建议（如“请检查网络连接”“尝试在Chrome或Firefox中打开”）</li></ul><p>例如：</p><div class="aritcle_card flexRow">
                                                          <div class="artcardd flexRow">
                                                                  <a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
                                                                                  src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                  <div class="aritcle_card_info flexColumn">
                                                                          <a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
                                                                          <p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
                                                                  </div>
                                                                  <a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                          </div>
                                                  </div><pre class="brush:php;toolbar:false;"><audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    音频加载失败：可能因网络中断、文件不存在，或浏览器不支持该格式。请刷新页面，或使用Chrome/Firefox重试。
  </audio>

  注意：这个文本不会影响SEO或无障碍读屏，但它是在JavaScript也失效时，用户能收到的最后一条有效信息。

  别指望备用节点解决MIME或路径问题

  很多人误以为写了备用提示，就能掩盖服务器配置错误。实际不是——如果响应头Content-Type是text/plain，浏览器连解码器都不调用，<code>canplay事件都不会触发，但备用文本照常显示。此时用户看到提示，却不知道真正卡在哪。

  排查优先级永远是：

  • Network面板确认音频请求状态码为200
  • 检查响应头Content-Type是否匹配source的type（如audio/mpeg）
  • 确认src路径是相对/绝对URL，而非本地file://路径
  • 最后才看备用文本是否出现——它只是结果，不是原因

  真正容易被忽略的是：备用文本只在“所有source均被跳过”时才生效；只要有一个被浏览器识别并开始加载（哪怕后续解码失败），它就不会显示。