HTML音频怎么使用track元素显示歌词-html教程-PHP中文网

HTML 元素的仅支持 WebVTT（.vtt）格式歌词，因规范强制要求 MIME 类型为 text/vtt，而 .lrc/.srt 不被识别；需手动转换格式、正确书写 WebVTT 结构，并用 JS 实现同步渲染。

html音频怎么使用track元素显示歌词

HTML 元素本身不支持歌词同步显示，但可以用元素加载 WebVTT 格式（.vtt）的歌词文件——前提是歌词已按时间轴转成标准 WebVTT 格式，且浏览器支持。

为什么直接放 `.lrc` 歌词文件不管用

浏览器只识别的 src 指向 WebVTT（.vtt）文件。常见 .lrc、.srt 文件会被静默忽略，控制台通常不报错，但字幕菜单里根本看不到该轨道。

.lrc 是纯文本+时间戳的非标准格式，没有统一解析器，不处理它
.srt 虽然结构清晰，但 HTML5 规范明确只要求支持 WebVTT（text/vtt MIME 类型）
必须手动或用工具把歌词转成 .vtt，不能靠浏览器自动转换

在中的写法和限制

结构上和一致，但实际表现更受限：多数浏览器（Chrome、Edge、Safari）会在音频控件旁显示字幕开关，但不会在页面上渲染字幕区域——除非你用 JS 手动读取并插入 DOM。

必须是的直接子元素，且放在所有之后、之前
必需属性： kind="subtitles" 或 kind="captions"、src（指向 .vtt）、srclang（如 zh）、label（如 中文歌词）
default 属性可加，但部分浏览器（如 Safari）对的 default 支持不稳定，建议 JS 初始化时显式启用
示例代码：

<audio controls><source src="song.mp3" type="audio/mpeg"><track kind="subtitles" src="lyrics-zh.vtt" srclang="zh" label="中文歌词" default></track></source></audio>

WebVTT 歌词文件怎么写才有效

WebVTT 不是简单的时间+文字拼接，开头必须有 WEBVTT 声明，每段之间空一行，时间格式严格为 hh:mm:ss.mmm --> hh:mm:ss.mmm，且需 UTF-8 编码。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

错误写法：00:01.23（缺毫秒、缺箭头、缺声明）或 [00:01.23]（LRC 风格）
正确开头必须是单独一行 WEBVTT，后面跟一个空行
每段歌词块格式示例：

WEBVTT

1
00:00:05.000 --> 00:00:08.500
山高水长情意浓

2
00:00:09.000 --> 00:00:12.200
风吹柳絮满天飞

支持简单 HTML 标签如、，但不支持 CSS 类或自定义样式；如需高亮当前句，得靠 JS 动态操作

浏览器兼容性和现实效果差异

桌面端 Chrome/Edge 显示字幕菜单并能切换，但默认不渲染字幕内容；Safari 对 + 的支持较弱，常不显示菜单；Firefox 完全不支持的渲染（仅支持）。

移动端基本不可用：iOS Safari 和 Android Chrome 均不渲染字幕，即使菜单存在
真正想让歌词“显示出来”，必须监听 timeupdate 事件，用 audio.textTracks[0].cues 获取当前匹配的 VTTCue，再手动更新 DOM 元素
服务器要返回正确的 MIME 类型：text/vtt；若返回 text/plain，Chrome 会拒绝加载

实际项目中，如果只是想展示歌词，别依赖自动渲染——它在场景下几乎就是个“半成品接口”，核心逻辑还得自己写 JS 控制。