enable download button for html5 audio player in chrome

Question

I have an audio element on a page that is added dynamically using javascript in the dom.

The outputted html is such:

        <audio preload="auto" controls="controls">
            <source src="https://urlofmp3.mp3" type="audio/mp3">
        </audio>

when I view this audio element on the page it looks like this:

As I understand Chrome is supposed to automatically put a download button on the right hand side... but for whatever reason it's not there. I've been able to find lots of sites telling me how to turn the download button off, but is there a way to explicitly turn it on?

Answer 1

 const audio = `<audio preload="auto" controls="controls"> <source src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mp3"> </audio>`; document.getElementById('song').insertAdjacentHTML('beforeend', audio);

 <div id="song"></div>

If you put a real MP3 file as src is showing the download button even adding the audio element dinamically with Javascript. I suppose that it checks and preloads the file and when success fills the controls...

Answer 2

i had the the same problem. i finally found a solution for this.

at first i just tried to let it download the .ogg .wav or .mp3 file this made it open in another tab in my browser but did not let me download it. now i treid to put the .ogg file into a zip folder and try to let it download the folder which was the solution for my froblem.

the code i use for this:

<button>
    <a href="HooniganProds\songs.zip" download>Click to Download!</a>
    </button>