Download extensive file on website

Question

I have the following problem: On a website that I developed for a client, contains a page to download audio, follows code to download audio:

<a href="<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>" download="<?php echo $audios->nome; ?>" target="_blank">
<button class="btn botoes_play_ouvir botao_saber_associacao">
<p>Baixar</p>
</button>
</a>

The problem is that, on the page, it contains some 20 files in downloadable list format and the files vary from 5 to 18MB. When I click on download, the website is processing, as if I wanted to run the audio instead of already downloading.

Would anyone have any tips on how I can improve this?

If you want to see the problem, follow the website link: Click here

Answer 1

You can request the download by JS is very simple

Code JavaScript

function saveAs(url) {    
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response);
a.download = filename; 
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
};
xhr.open('GET', url);
xhr.send();
}

And here, to download the file.

  <a href="javascript:" onclick="saveAs(<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>)"><?php echo $audios->nome; ?></a>

If it doesn’t work comment.

Answer 2

As Victor Gomes solution, follows how was the final code:

<div onclick="saveAs('<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>')">
   <button class="btn botoes_play_ouvir botao_saber_associacao">
      <p>Baixar</p>
   </button>
</div>

_{^{This code was originally posted by the author in the question as final version of the solution, therefore converted in response}}