javascript - enable download button for html5 audio player in chrome - Stack Overflow

admin管理员组

文章数量:1332377

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="" 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?

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?

• javascript
• html
• google-chrome
• audio
• html5-audio

Share Improve this question Follow edited Aug 31, 2017 at 5:24 aofdev 1,81211 gold badge1616 silver badges3030 bronze badges asked Aug 30, 2017 at 18:07 acolchagoffacolchagoff 1,97844 gold badges1919 silver badges3434 bronze badges 5

• 1 Do you have nodownload showing in the audio.controlsList..? If it does you may try auido.controlsList.remove('nodownload'); – Redu Commented Aug 30, 2017 at 18:37
• 1 I haven't explicitly added nodownload to the controls list anywhere but I'll try adding this line to see what happens. – acolchagoff Commented Aug 30, 2017 at 18:56
• No luck, same symptoms as before... – acolchagoff Commented May 9, 2018 at 17:26
• You should post a working example, I think it might have todo with the file size of the MP3. Where Chrome fails to create a downloadable file out of it. – Red Commented Nov 19, 2019 at 12:33
• unfortunately whenever this es up its in our app using proprietary client recordings. so I can't put those on stack overflow. – acolchagoff Commented Nov 21, 2019 at 21:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

const audio = `<audio preload="auto" controls="controls">
                  <source 
                    src="https://archive/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...

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 .oggfile 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>

本文标签： javascriptenable download button for html5 audio player in chromeStack Overflow