本文介绍一种跨浏览器、纯前端的方案，利用 music-metadata 库直接解析本地音频文件（如 MP3、FLAC、M4A 等），提取其中嵌入的专辑封面图像，并动态渲染到网页中，无需服务端参与。
本文介绍一种跨浏览器、纯前端的方案，利用 music-metadata 库直接解析本地音频文件（如 mp3、flac、m4a 等），提取其中嵌入的专辑封面图像，并动态渲染到网页中，无需服务端参与。
在 Web 开发中，常需从用户上传的音频文件中提取元数据（如标题、艺术家、专辑名）及内嵌封面图（即 ID3v2 APIC 帧或 FLAC 的 PICTURE 块等）。传统做法依赖服务端解析（如 Python 的 mutagen 或 pydub），但现代浏览器已支持通过 Blob 和流式解析完成全链路前端处理——关键在于选用兼容性好、格式覆盖广的元数据解析库。
目前最成熟可靠的方案是使用 music-metadata（原 music-metadata-browser 已归并至此项目），它同时支持 Node.js 与浏览器环境，原生支持 MP3、FLAC、MP4/M4A、OGG、WAV 等主流音频格式的 ID3、APEv2、Vorbis Comments、iTunes Metadata 等多种标签标准，并能准确提取多张封面图（含不同尺寸、类型和 MIME 格式）。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
以下是一个完整可运行的前端示例：
<!DOCTYPE html> <html> <head> <title>Extract album art with music-metadata</title> </head> <body> <h3>Select an audio file to extract album art</h3> <input style="cursor: pointer;" type="file" id="file" accept="audio/*" /> <pre class="brush:php;toolbar:false;" id="output" style="background:#f5f5f5; padding:10px; overflow-x:auto;"><script type="module"> async function run() { const { parseBlob } = await import('https://cdn.jsdelivr.net/npm/music-metadata@9/+esm'); const doc = { file: document.getElementById('file'), output: document.getElementById('output'), covers: document.getElementById('covers') }; doc.file.addEventListener('change', async (event) => { const file = event.target.files[0]; if (!file) { doc.output.textContent = 'No file selected'; return; } try { const { common, native } = await parseBlob(file); // 显示基础元数据 const metadata = { title: common.title || "Unknown Title", artist: common.artist || "Unknown Artist", album: common.album || "Unknown Album", year: common.year || "Unknown Year" }; doc.output.textContent = JSON.stringify(metadata, null, 2); // 提取并渲染封面图 doc.covers.innerHTML = ''; if (common.picture && Array.isArray(common.picture) && common.picture.length > 0) { common.picture.forEach((pic, idx) => { // 将 Uint8Array 转为 base64 字符串（注意：btoa 兼容 ASCII，需确保无二进制截断） const bytes = new Uint8Array(pic.data); let binary = ''; for (let i = 0; i < bytes.length; i++) { binary += String.fromCharCode(bytes[i]); } const base64 = btoa(binary); const img = document.createElement('img'); img.src = `data:${pic.format};base64,${base64}`; img.alt = `Cover ${idx + 1} (${pic.format}, ${pic.width}×${pic.height})`; img.style.maxWidth = '200px'; img.style.margin = '8px'; img.style.borderRadius = '4px'; doc.covers.appendChild(img); }); } else { doc.output.textContent += '\n\n⚠️ No embedded picture found.'; } } catch (err) { doc.output.textContent = `Error: ${err.message}\nStack: ${err.stack?.split('\n')[0]}`; } }); } run(); </script>
