Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

enable download button for html5 audio player in chrome

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: html5 audio tag

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?

like image 218
denodster Avatar asked Aug 30 '17 18:08

denodster


People also ask

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

Does HTML5 support MP3?

HTML5 introduced <audio> tag, as well as the JavaScript APIs, which allow the browser to play audio without the need for an external plugin. The most supported codecs for playing audio in HTML5 are Ogg Vorbis, MP3, and Wav.

Can we play audio files using HTML5?

Since the release of HTML5, audios can be added to webpages using the “audio” tag. Previously, audios could be only played on web pages using web plugins like Flash. The “audio” tag is an inline element that is used to embed sound files into a web page.

What is the HTML5 element for adding audio to a web page?

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.


1 Answers

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

like image 127
jmtalarn Avatar answered Oct 08 '22 10:10

jmtalarn