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?
The HTML <audio> element is used to play an audio file on a web page.
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.
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.
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.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With