JavaScript Base64音频下载卡顿无响应问题求助

我编写了一个简易的JavaScript函数用于下载Base64格式的音频文件，但浏览器仅持续加载却无法启动下载。能看到底部加载动画运行，但文件未出现在下载列表中；在加载结束前无法发起其他下载，且加载永远不会完成，只能关闭浏览器。该问题并非所有文件都会出现，我已尝试更换文件和浏览器，确认代码逻辑正确但效果不佳，请问如何让下载流畅启动？

原代码 #

JavaScript #

function downloadMp3() {
  var inputBase64 = document.getElementById('inputBase64').value;
  if (!inputBase64) {
    return;
  }

  if (!inputBase64.startsWith('data:audio/')) {
    inputBase64 = 'data:audio/mpeg;base64,' + inputBase64;
  }

  var fileName = 'b64encode_audio.mp3';

  var link = document.createElement('a');
  link.href = inputBase64;
  link.download = fileName;
  link.click();
}

document.getElementById('btn').addEventListener('click', downloadMp3)

HTML #

<textarea id="inputBase64"></textarea>
<button type="button" id="btn">Download</button>

解决方案 #

问题出在直接将超长Base64字符串作为a标签的href值——当音频文件较大时，浏览器解析Data URL会占用大量内存和主线程资源，导致卡顿甚至无限加载。改用Blob对象处理能大幅优化性能：

改进后的代码 #

JavaScript

function base64ToBlob(base64Str, mimeType) {
  // 去掉Base64前缀（如果存在）
  const base64Content = base64Str.replace(/^data:.+;base64,/, '');
  const byteCharacters = atob(base64Content);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: mimeType || 'audio/mpeg' });
}

function downloadMp3() {
  var inputBase64 = document.getElementById('inputBase64').value.trim();
  if (!inputBase64) {
    return;
  }

  // 提取或设置MIME类型
  let mimeType = 'audio/mpeg';
  if (inputBase64.startsWith('data:audio/')) {
    mimeType = inputBase64.match(/data:(audio\/[^;]+);base64,/)[1];
  }

  const blob = base64ToBlob(inputBase64, mimeType);
  const url = URL.createObjectURL(blob);
  const fileName = 'b64encode_audio.mp3';

  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();

  // 释放临时URL，避免内存泄漏
  setTimeout(() => {
    URL.revokeObjectURL(url);
  }, 100);
}

document.getElementById('btn').addEventListener('click', downloadMp3)

HTML

<textarea id="inputBase64" placeholder="输入Base64音频内容（可带data:audio前缀）"></textarea>
<button type="button" id="btn">Download</button>

优化说明 #

• Blob转换：将Base64字符串分块转换成Uint8Array再生成Blob，避免一次性处理超大字符串导致的内存溢出
• 临时URL：使用URL.createObjectURL生成的Blob URL比直接用Base64更高效，浏览器处理起来更轻便
• 内存管理：下载完成后通过URL.revokeObjectURL释放临时资源，防止内存泄漏
• MIME类型兼容：自动识别输入中的音频MIME类型，支持更多音频格式（如audio/wav、audio/ogg等）

内容的提问来源于stack exchange，提问作者Ocaso