如何下载网页MP3音频文件

本文详解为何直接用 Blob([audioElement]) 会导致下载损坏的 25 字节空文件，并提供纯 HTML/PHP 的简洁方案，以及兼容 JavaScript 的健壮实现方式。

在前端开发中，误将 <audio> DOM 元素本身当作音频数据传入 Blob 构造函数（如 new Blob([audio], {type: "octet-stream"})），是导致下载文件异常微小（如仅 25 字节）的根本原因。audio 是一个 HTMLAudioElement 对象，不是二进制流——它只是浏览器内用于播放的媒体接口，不包含原始音频字节内容。因此 Blob([audio]) 实际上序列化的是该对象的空壳字符串表示（例如 [object HTMLAudioElement]），远小于真实 MP3 文件。

✅ 推荐方案一：纯 HTML + PHP（最简单、最可靠）
利用 <a download> 的原生能力，直接指向服务器上的 MP3 文件路径，无需 JavaScript：

<tbody id="tbody">
<?php
for ($i = 0; $i < $count; $i++) {
    $res = mysqli_fetch_array($result);
    $filePath = "mp3/" . urlencode($res["song_artist"]) . "-" . urlencode($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>

✅ 优势：零 JS、无跨域限制、支持大文件、保留原始文件名（通过 download 属性指定）、自动触发浏览器原生下载逻辑。
⚠️ 注意：确保 Web 服务器已正确配置 MP3 的 MIME 类型（audio/mpeg），且 PHP 输出路径可被公开访问（避免 .htaccess 或 Nginx 规则拦截）。

✅ 方案二：JavaScript 安全下载（需获取真实二进制数据）
若必须用 JS（例如需权限校验、动态签名 URL、或添加请求头），应使用 fetch() 获取音频资源的 ArrayBuffer，再构造 Blob：

async function downloadAudio(i) {
    try {
        // 动态生成对应音频的 URL（与 PHP 中一致）
        const res = <?= json_encode($all_results); ?>; // 建议预加载数据到 JS 变量，避免内联 PHP 混淆
        const filename = `${res[i].song_artist}-${res[i].song_title}.mp3`;
        const url = `mp3/${encodeURIComponent(filename)}`;

        const response = await fetch(url);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);

        const arrayBuffer = await response.arrayBuffer();
        const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' }); // ✅ 正确 MIME 类型
        const href = URL.createObjectURL(blob);

        const a = Object.assign(document.createElement('a'), {
            href,
            download: filename,
            style: 'display:none'
        });
        document.body.appendChild(a);
        a.click();

        // 清理
        URL.revokeObjectURL(href);
        document.body.removeChild(a);
    } catch (err) {
        console.error('下载失败:', err);
        alert('音频下载失败，请检查网络或重试');
    }
}

⚠️ 关键修正点：

• ❌ 错误：new Blob([audioElement]) → ✅ 正确：fetch(url).then(r => r.arrayBuffer())
• ❌ 错误 MIME："octet-steam"（拼写错误 + 不匹配）→ ✅ 正确："audio/mpeg"
• ✅ 添加 encodeURIComponent() 防止中文/特殊字符路径出错
• ✅ 增加 try/catch 和错误提示提升健壮性

? 总结建议：

• 优先采用「HTML <a download>」方案——简单、高效、无兼容性问题；
• 仅当业务需要服务端鉴权、限速、日志记录等逻辑时，才启用 fetch + Blob 方案；
• 永远避免将 DOM 元素直接传入 Blob 构造函数；
• 所有用户输入（如歌曲名）务必 urlencode() 和 htmlspecialchars()，防止 XSS 和路径遍历漏洞。