当前位置：首页 > JavaScript

js实现mp3下载

2026-03-01 08:04:40JavaScript

使用a标签下载MP3

在HTML中创建一个隐藏的<a>标签，设置href为MP3文件URL，添加download属性触发下载。适用于已知文件URL且同源的情况。

const 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);
};

通过Blob对象下载

当需要处理二进制数据或跨域资源时，先通过fetch API获取文件数据，转换为Blob对象后创建对象URL下载。

const downloadMp3Blob = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);

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

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

处理跨域资源下载

对于跨域资源需要确保服务器配置CORS头部。若服务器不支持CORS，可考虑使用代理服务中转请求。

const downloadWithCors = async (url, filename) => {
  try {
    const response = await fetch(url, {
      mode: 'cors',
      headers: new Headers({ 'Origin': window.location.origin })
    });
    if (!response.ok) throw new Error('Network response was not ok');
    // 继续Blob下载流程...
  } catch (error) {
    console.error('Download failed:', error);
  }
};

分块下载大文件

对于大文件可采用流式处理，避免内存问题。通过创建ReadableStream逐步接收数据。

const downloadLargeMp3 = async (url) => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const chunks = [];

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

  const blob = new Blob(chunks);
  // 继续使用Blob下载流程...
};