本文讲解如何通过纯 html 方式（无需 javascript）安全、准确地下载 mp3 音频文件，避免因 blob 构造错误导致文件损坏或体积异常（如仅 25 字节）的问题。

在 Web 开发中，直接通过

const blob = new Blob([audio], {type:"octet-steam"});

这里将整个

✅ 正确做法是绕过 JavaScript 操作媒体元素，改用原生 HTML 的 download 属性配合直接文件 URL：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<tbody id="tbody">
<?php
for ($i = 0; $i < $count; $i++) {
    $res = mysqli_fetch_array($result);
    $filePath = "mp3/{$res['song_artist']}-{$res['song_title']}.mp3";
?>
    <tr>
        <td><audio src="<?= htmlspecialchars($filePath) ?>" controls preload="metadata" style="width: 200px;"></td>
        <td><a href="<?= htmlspecialchars($filePath) ?>" download="<?= htmlspecialchars("{$res['song_artist']}-{$res['song_title']}.mp3") ?>">&#8628</a></td>
    </tr>
<?php } ?>
</tbody>

? 关键改进说明：

• 使用 原生属性：浏览器会发起真实 HTTP GET 请求并保存响应体为文件，确保字节级完整性；
• download 属性值支持自定义文件名（推荐动态生成，如 {$res['song_artist']}-{$res['song_title']}.mp3），提升用户体验；
• htmlspecialchars() 防止路径中特殊字符（如空格、&、' 等）引发 HTML 解析错误或 XSS 风险；
• 移出循环，保证 HTML 结构语义正确（单个 包含多行 ）。

  ⚠️ 注意事项：

  • 确保 MP3 文件路径可被浏览器直接访问（即位于 Web 根目录下，如 /mp3/...），且服务器未禁止跨域下载或添加了 Content-Disposition: attachment 等干扰头；
  • 若音频资源受权限控制（如需登录/Token），则必须使用后端代理接口返回文件流，并配合 fetch + Blob + URL.createObjectURL —— 但此时需正确读取响应流：

    fetch('/api/download?file=xxx.mp3')
      .then(res => res.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = Object.assign(document.createElement('a'), { href: url, download: 'xxx.mp3' });
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(url);
        a.remove();
      });

  • 不要滥用 type: "octet-stream"（注意拼写应为 octet-stream，原文 octet-steam 是错别字），它仅影响 MIME 类型声明，无法解决源数据错误。

  总结：优先使用语义化 HTML 实现下载；仅当需动态生成内容、添加请求头或处理权限逻辑时，才引入 JavaScript + Blob 方案，并务必确保 Blob 输入为真实的二进制数据（如 ArrayBuffer 或 Uint8Array）。