如何下载网页MP3音频文件

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

在前端开发中，误将

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

✅ 优势：零 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 = ; // 建议预加载数据到 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 」方案——简单、高效、无兼容性问题；
• 仅当业务需要服务端鉴权、限速、日志记录等逻辑时，才启用 fetch + Blob 方案；
• 永远避免将 DOM 元素直接传入 Blob 构造函数；
• 所有用户输入（如歌曲名）务必 urlencode() 和 htmlspecialchars()，防止 XSS 和路径遍历漏洞。