前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库audio 回退内容 不支持
HTML语义与文档

audio 里面的文字什么时候会显示,能当音频加载失败提示吗?

<audio> 内的回退文字主要在浏览器不支持 <audio> 元素时显示。现代浏览器识别播放器但音频源失败时,不应指望那段文字自动替换播放器。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

回退内容与资源错误分开

  1. <audio>在页面中嵌入声音播放器
  2. 内部文本供不识别媒体元素的环境展示
  3. 媒体错误资源无法播放时的单独失败状态

把完整文字稿只放在 <audio> 内部,现代浏览器用户可能看不到。

核心回答

先记住这个答案

<audio>浏览器不支持音频</audio> 中的文字是元素级回退:主要给不认识 <audio> 的环境显示。现代浏览器虽然能识别 <audio>,仍可能因为文件不存在、网络错误或格式无法解码而播放失败;这时内部文字通常不会像错误提示一样自动出现。重要内容应在播放器外提供文字稿或下载链接,资源错误另用界面逻辑处理。

  • 元素内文本是旧浏览器回退内容
  • 资源加载失败不等于元素不受支持
  • 重要音频应提供文字稿
  • 下载链接可作为额外访问入口

回退文字放在哪里

一段采访录音希望旧环境至少看到说明和下载入口。可以把链接放进元素内部作为不支持播放器时的回退,但现代页面还应在外部保留真正需要所有人看到的文字稿入口。

播放器与可见文字稿入口HTML
<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  浏览器不支持音频播放。<a href="interview.mp3">下载录音</a>
</audio>
<p><a href="interview-transcript.html">阅读采访文字稿</a></p>

现代浏览器识别 <audio> 后会显示播放器,内部那句回退文字通常不会出现在页面上;外面的文字稿链接仍可见。这样不依赖播放器状态也能访问主要内容。 文字稿不仅服务旧浏览器,也方便听力受限、不能开声音或希望搜索内容的用户。不要把它只埋在不会显示的回退区域。

文件失败需要独立处理

音频源可能返回 404、被跨域策略阻止,或当前浏览器无法解码。浏览器仍认识 <audio> 标签,所以内部回退文本不能可靠说明错误原因。

需要明确错误反馈时,可以监听媒体元素的错误状态、展示播放器外的提示,并提供备用格式或下载链接。若业务要求音频一定可用,还应监控真实资源请求,而不只是检查页面上是否有播放器。

<audio> 标签内部的回退文字主要给完全不支持该元素的浏览器;现代浏览器即使支持 <audio>,但音频地址 404 或解码失败,也不会自动把这段文字显示出来。播客页面若需要稳定提供下载入口和文字稿,就把它们放在播放器旁边的普通内容里。还应给录音一个清楚的标题或上下文,避免辅助技术只读到“音频控件”却不知道播放的是什么。

回答前,多想一步

容易答错的地方

把内部文字当成所有播放错误的提示
元素受支持但资源失败是另一种情况,内部文字未必可见。
把唯一文字稿放在 <audio> 内部
现代浏览器通常隐藏元素级回退内容,文字稿应在播放器外有可见入口。
试着用自己的话回答

面试官还会怎么问?

提供多个格式候选能解决什么?

浏览器可挑可解码的来源,提高播放成功率;网络断开或所有源失效时仍需要错误处理。

controls 不写会怎样?

不会显示浏览器原生控件,若无自定义控制,用户可能无法播放或暂停。

音频内容必须有文字版吗?

对重要信息,文字稿能让无法听音频的人获得内容,也方便快速浏览和检索。

从一道题,走向一组知识

把知识连起来

语义与文档

audio 和 video 里的 source 怎样选择可播放文件?

<source> 可以提供多种音频格式候选,但不能保证所有资源都可播放。

语义与文档

同一内容有多个 URL,canonical 链接该怎么写?

canonical 链接解决 URL 规范化,与媒体失败回退无直接关系。

参考资料

  • HTML:语义与文档参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 回退文字放在哪里
  3. 文件失败需要独立处理
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑