JS：读取本地音频元数据示例
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>
<div class="artBox">
<h1>获取本地音频元信息</h1>
<p>
<strong>音频元信息</strong>（Metadata）指存储在音频文件中的描述性数据，通常包括以下内容：
</p>
<ul>
<li>艺术家：演唱或创作该音频的艺术家</li>
<li>专辑名称：音频所属的专辑名称</li>
<li>曲目标题：音频的具体名称</li>
<li>音频格式：如MP3、WAV、FLAC等</li>
<li>比特率和采样率：音频文件的技术规格</li>
<li>歌词：如果可用，音频文件中嵌入的歌词信息</li>
<li>专辑封面：与音频文件相关的图像文件，通常是专辑的封面艺术</li>
</ul>
<blockquote>
<p>例如在 Windows 资源管理器中，默认情况下，鼠标指针悬停在一首 MP3 文件上，系统会弹出项目类型、大小等歌曲信息，点选该文件，在右侧预览窗口可能还出现一张图片。</p>
<p>音频的元数据可以增删改，Windows 平台资源管理器操作入口：属性→详细信息，或用专业工具完成。</p>
</blockquote>
<p>在JS中，获取这些信息有部分需要借助第三方库，且因为涉及到权限问题，通常只能操作通过 <code>input</code> 控件（下称input控件）获取到的本地音频文档，对于服务器上的文档需要跨域支持（本文不讨论）。</p>
<p>要读取音频文档的元数据信息，最简单的第三方库叫 jsmediatags，开源、免费项目，它可以拿到诸如艺术家、唱片集、标题、专辑封面等等音频元信息，但是它并不完美，其他信息还需要借助 input控件 集成的 file 数据和 audio 控件提供的相关数据实现。下面是引用 jsmediatags 的方法之一：</p>
<pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script></code></pre>
<p>如果访问上述资源不稳定（不墙裂支持的原因），有条件的可以将其保存在自己的虚拟或真实的服务器上使用。</p>
<p>以下是一个完整的应用实例，它不仅仅是只使用 jsmediatags 库但突出它：</p>
<div class="codebox" data-prev="1">
<style>
.pa { margin: auto; width: 700px; height: 460px; }
.pa > p, .pa > pre { margin: 30px 0; }
.flex { display: flex; justify-content: space-between; align-items: center; }
.tMid { text-align: center; }
#coverPic { max-width: 100%; }
</style>
<div class="pa">
<p class="flex">
<input type="file" id="musicFile" accept=".mp3, .ogg, .wav, .acc, .webm">
<audio id="audio" controls></audio>
</p>
<pre id="metaMsg"></pre>
<p class="tMid">
<img id="coverPic" src="https://638183.freep.cn/638183/small/260.webp" alt="">
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
<script>
const rawPic = coverPic.src; // 原始图片
musicFile.onchange = () => {
const fileList = musicFile.files; // 获取被选中文件列表
if (fileList.length === 0) return; // 未选择任何文件
const file = fileList; // 处理列表中的第一个文件
jsmediatags.read(file, {
onSuccess: (tag) => {
// 获取封面
if (tag.tags.picture) {
const { data, format } = tag.tags.picture;
const byteArray = new Uint8Array(data);
const blob = new Blob(, { type: format });
const cover = URL.createObjectURL(blob); // 创建URL对象
coverPic.src = cover || rawPic; // 如果没有封面就是用原始图片
}
// 获取其它信息
metaMsg.innerText = `唱片集 ：${tag.tags.album || '未知'}
艺术家 : ${tag.tags.artist || '未知'}
歌曲名 ：${tag.tags.title || '未知'}
大小 ：${(file.size/1024/1024).toFixed(2)} MB`;
},
onError: console.error
});
audio.src = URL.createObjectURL(file); // 使用URL创建音频文档对象使其可用
audio.play(); // 播放音频
};
</script>
</div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
</script> 一楼的应用实例，直接通过 <script src=""></script> 标签引用 jsmediatags 库，运行时有效（前提是能正常访问 cloudflare.com的资源），因为预览效果页面属性 frame 页面，不受制于 Discuz! 论坛程序的相关机制。若在 Discuz! 基础页面展示，需要动态加载JS资源。 有意思，去听了几首本地歌曲，其他的信息倒没什么，主要能看到专辑封面，这个通常看不到的呢{:4_187:} 红影 发表于 2026-4-4 22:03
有意思，去听了几首本地歌曲，其他的信息倒没什么，主要能看到专辑封面，这个通常看不到的呢
音频文档的元信息可以随意编辑，有时候为了减少体量，优先删除封面，你的文件却是反过来？ 马黑黑 发表于 2026-4-4 22:06
音频文档的元信息可以随意编辑，有时候为了减少体量，优先删除封面，你的文件却是反过来？
我是说本地音频鼠标悬浮上去能看到歌名等信息，看不到封面，你这能看到了{:4_173:} 红影 发表于 2026-4-5 10:22
我是说本地音频鼠标悬浮上去能看到歌名等信息，看不到封面，你这能看到了
哦，你说的是在 Windows 资源管理器中看不到唱片集封面图片。
在资源管理器窗口，在右侧上方找到“预览”字样，点击它会启用、关闭预览侧栏。如果计算机系统没有禁用文档预览功能，当用户点击任意有预览内容的文档，都会在那里出现。
可以在资源管理器点“查看”菜单，找到菜单中的预览窗格相关项目，点击它启用预览功能。如果无法启用，网查一下解决方法。 马黑黑 发表于 2026-4-5 13:13
哦，你说的是在 Windows 资源管理器中看不到唱片集封面图片。
在资源管理器窗口，在右侧上方找到“预 ...
原来在自己电脑也能看到封面啊，这个还第一次知道呢，谢谢黑黑，我去试试{:4_187:} 红影 发表于 2026-4-5 20:20
原来在自己电脑也能看到封面啊，这个还第一次知道呢，谢谢黑黑，我去试试
不知道是出来了木有 马黑黑 发表于 2026-4-5 21:34
不知道是出来了木有
有的有有的没有呢。 红影 发表于 2026-4-6 16:36
有的有有的没有呢。
有的有，是因为它有；有的木有，是因为它木有。
一楼应该说过：这些信息是可以编辑的（包括你在内），有时为了减少文件的体量，会把部分元数据删掉。 马黑黑 发表于 2026-4-6 20:29
有的有，是因为它有；有的木有，是因为它木有。
一楼应该说过：这些信息是可以编辑的（包括你在内）， ...
嗯嗯，没有的那些可能是被删掉的。 红影 发表于 2026-4-9 20:11
嗯嗯，没有的那些可能是被删掉的。
可以删掉的。如果有专业软件，这类属性随便编写、取舍。 马黑黑 发表于 2026-4-9 20:47
可以删掉的。如果有专业软件，这类属性随便编写、取舍。
之前还从来不知道一首音乐还有这么多属性，更不知道属性还可以编辑，谢谢黑黑{:4_187:} 红影 发表于 2026-4-9 22:53
之前还从来不知道一首音乐还有这么多属性，更不知道属性还可以编辑，谢谢黑黑
{:4_190:} 马黑黑 发表于 2026-4-10 22:40
以前之关注音乐可以裁掉一部分的头尾，就觉得挺了不起了，原来连封面信息都可编辑。 红影 发表于 2026-4-11 19:29
以前之关注音乐可以裁掉一部分的头尾，就觉得挺了不起了，原来连封面信息都可编辑。
一切皆有可能 马黑黑 发表于 2026-4-11 21:40
一切皆有可能
这一切太神奇了。 红影 发表于 2026-4-12 12:01
这一切太神奇了。
是的 马黑黑 发表于 2026-4-12 12:58
是的
声音、色彩、图像等等，都是能修改的，这个在几十年前都是不可能的呢。 红影 发表于 2026-4-12 14:07
声音、色彩、图像等等，都是能修改的，这个在几十年前都是不可能的呢。
胡说！
MP3一出来，就是可以这么修改的。除了MP3，其它音频格式，只要支持这些属性，都可以修改！
反而是现在，有些东西不允许修改了。