当前位置：首页 > JavaScript

js实现mp3下载

2026-04-04 08:41:51JavaScript

实现MP3下载的JavaScript方法

在浏览器环境中，可以通过以下方式实现MP3文件的下载功能：

使用a标签下载

创建隐藏的<a>标签并触发点击事件是最简单的下载方式：

function downloadMP3(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'audio.mp3';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

使用fetch API处理跨域资源

当需要处理跨域资源或添加授权头时：

async function downloadMP3WithAuth(url, filename) {
  const response = await fetch(url, {
    headers: { Authorization: 'Bearer token' }
  });
  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = objectUrl;
  a.download = filename || 'audio.mp3';
  document.body.appendChild(a);
  a.click();

  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(objectUrl);
  }, 100);
}

处理大文件分块下载

对于大文件可分块下载并合并：

async function downloadLargeMP3(url, filename, chunkSize = 1024 * 1024) {
  const response = await fetch(url);
  const totalBytes = parseInt(response.headers.get('Content-Length'));
  let receivedBytes = 0;
  const chunks = [];

  while(receivedBytes < totalBytes) {
    const end = Math.min(receivedBytes + chunkSize, totalBytes);
    const chunkResponse = await fetch(url, {
      headers: { Range: `bytes=${receivedBytes}-${end}` }
    });
    chunks.push(await chunkResponse.blob());
    receivedBytes = end;
  }

  const finalBlob = new Blob(chunks);
  const objectUrl = URL.createObjectURL(finalBlob);

  const a = document.createElement('a');
  a.href = objectUrl;
  a.download = filename || 'audio.mp3';
  a.click();
  URL.revokeObjectURL(objectUrl);
}

添加下载进度显示

async function downloadWithProgress(url, filename) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const totalBytes = +response.headers.get('Content-Length');
  let receivedBytes = 0;
  const chunks = [];

  while(true) {
    const { done, value } = await reader.read();
    if(done) break;

    chunks.push(value);
    receivedBytes += value.length;
    const progress = Math.round((receivedBytes / totalBytes) * 100);
    console.log(`Download progress: ${progress}%`);
  }

  const blob = new Blob(chunks);
  const objectUrl = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = objectUrl;
  a.download = filename || 'audio.mp3';
  a.click();
  URL.revokeObjectURL(objectUrl);
}

Node.js环境实现

在服务器端使用Node.js：

const fs = require('fs');
const https = require('https');

function downloadMP3Node(url, filepath) {
  const file = fs.createWriteStream(filepath);
  https.get(url, response => {
    response.pipe(file);
    file.on('finish', () => {
      file.close();
      console.log('Download completed');
    });
  }).on('error', err => {
    fs.unlink(filepath);
    console.error('Download failed:', err);
  });
}

注意事项：

js实现mp3下载