Download base64 Audio Files in React in Two Ways

Introduction

In modern web development, audio files are commonly used for many features like music players, podcasts, voice recordings, and more. If you're building a React app and want to give users the ability to download audio files.

When working with APIs that return audio data in Base64 format, downloading the audio as a file can be tricky. In this blog, we’ll explore two methods to achieve this, along with their pros and cons. This blog explains a direct approach for small files and a Blob-based method for larger ones. Discover the pros, cons, and when to use each solution in your projects.

Approach 1: Direct Base64 to Download

The first method involves directly using the Base64 string as a data: URI. Here’s the code:

function downloadBase64Audio(base64Data, fileName) {
    const link = document.createElement('a');
    link.href = `data:audio/mpeg;base64,${base64Data}`;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

How It Works

• The Base64 string is embedded directly in the URL.
• An anchor tag (< a>) is created dynamically with this URL.
• The click() method triggers the download.

Approach 2: Decode Base64 and Use Blob

The second method decodes the Base64 string into binary data, creates a Blob, and generates a temporary downloadable URL.

const downloadBase64 = (base64, name) => {
  const byteCharacters = atob(base64);
  const byteArrays = [];

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

  const blob = new Blob(byteArrays, { type: "audio/mp3" });
  const url = URL.createObjectURL(blob);

  var link = document.createElement("a");
  link.download = "audio.mp3";
  link.href = url;
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
};

How It Works

• Decodes the Base64 string into binary data using atob().
• Breaks the binary string into chunks for efficient processing.
• Converts the binary data into a Blob and generates a downloadable URL.

Key Differences

1. Direct Embedding vs Conversion

• Approach 1:

  • Directly uses the Base64 string in a data: URI to initiate the download.
  • No intermediate processing; the Base64 string is directly set as the href attribute of an anchor (<a>).
  • Suitable for small files as browsers handle the data: URI directly.

• Approach 2:

  • Decodes the Base64 string into binary data using atob().
  • Converts the binary data into a Blob, which is then used to generate a temporary URL for downloading.
  • Ideal for larger files because it avoids the size limitations of data: URIs in some browsers.

2. File Handling

• Approach 1:

  • Directly creates a download link using data:audio/mpeg;base64,....
  • Limited by the length of the URL since browsers impose limits on data: URI sizes (typically a few megabytes).
  • Not memory-efficient for large files.

• Approach 2:

  • Decodes the Base64 string into a binary string and creates a Blob.
  • Blob URLs (Object URLs) are better for handling large files because they don't embed the entire file content in the URL.
  • Memory usage is lower as it doesn't rely on long strings in memory.

3. Flexibility

• Approach 1:

  • Simpler, but less flexible and may not work for all use cases (e.g., larger files or certain file formats).
  • Limited customisation for file handling.

• Approach 2:

  • More complex but provides greater flexibility.
  • Supports handling files of any size and type by adjusting the Blob type ({ type: "audio/mp3" }).

4. Reusability

• Approach 1:

  • A straightforward implementation, but its usage is more specific to Base64 audio data.

• Approach 2:

  • More modular, with reusable functions like downloadURI that can be used for any type of Blob data, not just audio files.

Use Case Recommendations

• Approach 1:

  • Use when the file is small (e.g., a few KB to a couple of MB).
  • The content is guaranteed to fit within the browser's data: URI limits.
  • Simpler implementation is preferred.

• Approach 2:

  • Use for larger files where the data: URI might exceed browser limits.
  • When flexibility is needed to support other file types and sizes.
  • To ensure better memory management and scalability.

Which Approach Should You Use?

Go with Approach 1 if your audio files are small (a few MB) and you need a quick solution.
Choose Approach 2 for larger files or if you want better performance and flexibility.

Conclusion

Both methods can effectively download Base64 audio files, but their usage depends on the size of the file and your specific needs. Understanding these trade-offs will help you pick the best solution for your project.

Happy Coding :)