0

I have a small simple function that downloads a Base64 file, but the browser just loads and loads, but the download doesn't start.

The download starts because I can see at the bottom that the loading animation is in progress, but it does not appear in the downloads.

Until it finishes, it won't let you download anything else, not a single download starts. But it never finishes, so I have to close the whole browser.

This is not the case for all files.

I tried to use different files and a different browser. But not all files have this problem, so I know the code is correct, just not effective.

What can I do to make the download start smoothly?

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)
<textarea id="inputBase64"></textarea>
<button type="button" id="btn">Download</button>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Ocaso
  • 11
  • 1
  • I made you a snippet. If the HTML is not what you have, please [edit] and change it. PS: The snippet does not run here due to iframe security constraints. The jsfiddle works however https://jsfiddle.net/mplungjan/9b1a68wq/ using mp3 from this page https://gist.github.com/novwhisky/8a1a0168b94f3b6abfaa – mplungjan Aug 15 '23 at 11:08
  • The problem is that the download does not even start, but the browser indicates that it has. Here is the sample MP3 I tested it with: https://pastes.io/icxqgjzaw4 Here is an image about the problem: https://ibb.co/NrRgCVt At the bottom you can see that the download animation is in progress. (It goes through every 1 second and has been repeating for 10 minutes now, but still not downloading.) At the top, nothing is visible in the download. I think the download function should be rewritten to make it more efficient, because the base64 code is too big. – Ocaso Aug 15 '23 at 11:34
  • Ahem, yeah. There are limits on URL lengths and you are creating a URL to download. Make a blob instead – mplungjan Aug 15 '23 at 11:41
  • 1
    [dupe](https://stackoverflow.com/questions/16761927/aw-snap-when-data-uri-is-too-large) – mplungjan Aug 15 '23 at 11:42
  • Thank you for your help. I have modified my code, but the loading animation does not appear. The download doesn't start when link.download is activated and window.location can't play the file created. Here is the rewritten code, I might have broken something: https://pastebin.com/fT1EmyHT – Ocaso Aug 15 '23 at 13:57
  • Works for me if I do not change location https://jsfiddle.net/mplungjan/6aue1ycv/ – mplungjan Aug 15 '23 at 14:08
  • 1
    Ohh, now I see the problem. The earlier error was blocking the download, just wasn't stuck in the download animation so I didn't notice it. But restarting the browser solved the problem. You are awesome, thank you so much for your help. Have a great day! – Ocaso Aug 15 '23 at 14:21
  • Sorry, but now I see that the above code only works with your Base64 code, not mine: https://pastes.io/icxqgjzaw4 – Ocaso Aug 16 '23 at 09:46
  • Yeah, that is possible that it is too big to process – mplungjan Aug 16 '23 at 11:31

0 Answers0