JS：读取本地音频元数据示例

马黑黑

获取本地音频元信息

音频元信息（Metadata）指存储在音频文件中的描述性数据，通常包括以下内容：

• 艺术家：演唱或创作该音频的艺术家
• 专辑名称：音频所属的专辑名称
• 曲目标题：音频的具体名称
• 音频格式：如MP3、WAV、FLAC等
• 比特率和采样率：音频文件的技术规格
• 歌词：如果可用，音频文件中嵌入的歌词信息
• 专辑封面：与音频文件相关的图像文件，通常是专辑的封面艺术

例如在 Windows 资源管理器中，默认情况下，鼠标指针悬停在一首 MP3 文件上，系统会弹出项目类型、大小等歌曲信息，点选该文件，在右侧预览窗口可能还出现一张图片。

音频的元数据可以增删改，Windows 平台资源管理器操作入口：属性→详细信息，或用专业工具完成。

在JS中，获取这些信息有部分需要借助第三方库，且因为涉及到权限问题，通常只能操作通过 input[type=file] 控件（下称input控件）获取到的本地音频文档，对于服务器上的文档需要跨域支持（本文不讨论）。

要读取音频文档的元数据信息，最简单的第三方库叫 jsmediatags，开源、免费项目，它可以拿到诸如艺术家、唱片集、标题、专辑封面等等音频元信息，但是它并不完美，其他信息还需要借助 input控件 集成的 file 数据和 audio 控件提供的相关数据实现。下面是引用 jsmediatags 的方法之一：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>

如果访问上述资源不稳定（不墙裂支持的原因），有条件的可以将其保存在自己的虚拟或真实的服务器上使用。

以下是一个完整的应用实例，它不仅仅是只使用 jsmediatags 库但突出它：

<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[0]; // 处理列表中的第一个文件 jsmediatags.read(file, { onSuccess: (tag) => { // 获取封面 if (tag.tags.picture) { const { data, format } = tag.tags.picture; const byteArray = new Uint8Array(data); const blob = new Blob([byteArray], { 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>

马黑黑

一楼的应用实例，直接通过 <script src=""></script> 标签引用 jsmediatags 库，运行时有效（前提是能正常访问 cloudflare.com  的资源），因为预览效果页面属性 frame 页面，不受制于 Discuz! 论坛程序的相关机制。若在 Discuz! 基础页面展示，需要动态加载JS资源。

红影

有意思，去听了几首本地歌曲，其他的信息倒没什么，主要能看到专辑封面，这个通常看不到的呢

马黑黑

红影 发表于 2026-4-4 22:03
有意思，去听了几首本地歌曲，其他的信息倒没什么，主要能看到专辑封面，这个通常看不到的呢

音频文档的元信息可以随意编辑，有时候为了减少体量，优先删除封面，你的文件却是反过来？