先记住这个答案
<audio>浏览器不支持音频</audio> 中的文字是元素级回退:主要给不认识 <audio> 的环境显示。现代浏览器虽然能识别 <audio>,仍可能因为文件不存在、网络错误或格式无法解码而播放失败;这时内部文字通常不会像错误提示一样自动出现。重要内容应在播放器外提供文字稿或下载链接,资源错误另用界面逻辑处理。
- 元素内文本是旧浏览器回退内容
- 资源加载失败不等于元素不受支持
- 重要音频应提供文字稿
- 下载链接可作为额外访问入口
回退文字放在哪里
一段采访录音希望旧环境至少看到说明和下载入口。可以把链接放进元素内部作为不支持播放器时的回退,但现代页面还应在外部保留真正需要所有人看到的文字稿入口。
<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 不写会怎样?
不会显示浏览器原生控件,若无自定义控制,用户可能无法播放或暂停。
音频内容必须有文字版吗?
对重要信息,文字稿能让无法听音频的人获得内容,也方便快速浏览和检索。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。