HTML原生标签不显示歌曲名、艺术家等元数据，需用JavaScript手动绑定或解析ID3标签；controls仅提供基础播放控件，title属性仅影响tooltip，不渲染在控件中。
用 <audio></audio> 标签插入音频并显示基本信息
HTML 原生 <audio></audio> 标签本身不自动显示歌曲名、艺术家等元数据，它只负责播放和基础控件（播放/暂停、音量、进度条）。所谓“显示歌曲信息”，必须靠 JavaScript 读取音频文件的 ID3 标签（MP3）或 metadata（如 WebM/OGG），再手动填入页面元素——浏览器不会帮你渲染这些字段。
为什么 controls 属性不显示歌名和作者
浏览器内置的 controls 是通用播放器 UI，设计目标是兼容所有音频源（本地文件、流、合成音频），它不解析或展示 ID3 或其他元数据。即使你给 <audio></audio> 加了 title 属性，也仅影响 tooltip（鼠标悬停提示），不会出现在控件面板里。
-
title属性不是标准音频元数据载体，只是 HTML 元素通用属性 - MP3 的 ID3v2 标签（含标题、艺人、专辑）需用 JS 库（如
music-metadata-browser）解析，且必须在文件加载完成前或通过loadstart/loadedmetadata阶段读取 - 浏览器对本地文件的 ID3 支持极弱；服务端返回的响应头若缺少
Content-Type: audio/mpeg，也可能导致解析失败
简单可行的做法：手动绑定元数据到 DOM
如果音频来源可控（比如你自己上传并管理的 MP3），最稳的方式是**不依赖自动解析，而是把歌曲信息存在 HTML 结构里，用 JS 同步更新**。这样避免跨域、CORS、ID3 版本兼容、异步加载时机等问题。
<audio id="player" src="song.mp3"></audio> <div class="track-info"> <div>标题：<span id="title">未知</span></div> <div>艺术家：<span id="artist">未知</span></div> </div>
然后用 JS 关联：
立即学习“前端免费学习笔记（深入）”；
const audio = document.getElementById('player');
const titleEl = document.getElementById('title');
const artistEl = document.getElementById('artist');
// 假设你已知这首歌的信息（来自 JSON 配置或后端 API）
const track = {
title: 'Blinding Lights',
artist: 'The Weeknd'
};
audio.addEventListener('loadedmetadata', () => {
titleEl.textContent = track.title;
artistEl.textContent = track.artist;
});
想自动读 ID3？注意三个硬限制
真要走自动解析路线，music-metadata-browser 是目前最靠谱的前端库，但它有明确前提：
- 音频文件必须支持 CORS（服务端需返回
Access-Control-Allow-Origin，否则 fetch 失败） - 不能直接用
<input type="file">选中本地 MP3 后立刻解析——得先用FileReader读成 ArrayBuffer，再传给解析器 - ID3 必须是 v2.3 或 v2.4（v1 和 v2.2 不被支持），且标签需嵌入在文件开头（部分转码工具会剥离）
- 解析是异步的，不能指望在
loadedmetadata事件里拿到结果；必须等解析完成后再更新 UI
多数实际项目里，自动解析带来的复杂度远超收益，尤其当音频由后台统一管理时，把元数据存在数据库或 JSON 清单里，同步输出到页面，更可靠也更快。
真正容易被忽略的是：音频加载状态和元数据就绪状态不是一回事。loadedmetadata 只表示浏览器能读尺寸/时长等基础信息，不代表 ID3 已就绪；而手动绑定则完全绕开了这个时序陷阱。
