HTML怎么插入音频并显示歌曲信息-html教程-PHP中文网

HTML原生标签不显示歌曲名、艺术家等元数据，需用JavaScript手动绑定或解析ID3标签；controls仅提供基础播放控件，title属性仅影响tooltip，不渲染在控件中。

html怎么插入音频并显示歌曲信息

用标签插入音频并显示基本信息

HTML 原生标签本身不自动显示歌曲名、艺术家等元数据，它只负责播放和基础控件（播放/暂停、音量、进度条）。所谓“显示歌曲信息”，必须靠 JavaScript 读取音频文件的 ID3 标签（MP3）或 metadata（如 WebM/OGG），再手动填入页面元素——浏览器不会帮你渲染这些字段。

为什么 `controls` 属性不显示歌名和作者

浏览器内置的 controls 是通用播放器 UI，设计目标是兼容所有音频源（本地文件、流、合成音频），它不解析或展示 ID3 或其他元数据。即使你给加了 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 关联：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

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;
});