How do I add a download button to my audio file?

Question

I have an audio file on my website. It's played once you click a button and it works and thats all well and good. However, I need it so that when you click the 3 dots at the end, users can download said audio. audio screenshot. Any ideas on how to achieve this without javascript?

I've looked up a couple solutions via web3schools and sololearn. I don't have the firmest grasp on HTML and CSS so I just tried copying what they had, but none of it seemed to work.

want download here after clicking 3 dots

<a href="Audio/Commercial.mp3" class="cta"< Commercial Demo</a< (ignore the reversed > symbol) this is the code I have for one buttons users would press to hear the audio. I just need to make it downloadable as well.

Does this answer your question? [How can I create download link in HTML?](https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html) — Aaron Stanek, Jul 21 '23 at 23:59
Please provide enough code so others can better understand or reproduce the problem. — Community, Jul 22 '23 at 05:04

score 0 · Answer 1 · answered Jul 22 '23 at 01:06

0

You can do this without javascript by using the download attribute for the <a> tag.

<a href="FILE_PATH" download>Download audio file</a>

Optionally, you can suggest a file name for the downloaded file by adding...

<a href="FILE_PATH" download="YourFileName">Download audio file</a>

https://www.w3schools.com/tags/att_a_download.asp

answered Jul 22 '23 at 01:06

jdosh

11
3

Hi guys, Thanks for the suggestions! Unfortunately neither have worked, perhaps I left out some key information. I do not have a domain for my website currently so it isn't up online. All the audio files are on my computer. I can just fine, but when I include the download="", it does not register the file path like it does when I do it through href. – noobcoder Jul 22 '23 at 17:29
So the download="" is an optional tag just to name the output file on the user's computer. If you do , does that work? – jdosh Jul 23 '23 at 02:41
To clarify, you still need the 'href' part for downloading. That part gives the file path. Just put the word "download" after the href="...." portion. – jdosh Jul 23 '23 at 03:51
Hi, that does not work for me for some unknown reason because everywhere else I check doing that works. – noobcoder Jul 24 '23 at 02:05
Could you share more of your code so we can problem-solve this? – jdosh Jul 28 '23 at 22:15

score 0 · Answer 2 · answered Jul 22 '23 at 05:35

You can use the download attribute in a hyperlink. Here's an example:

<a href="example.com/path/to/audio.mp3" download="audio_name">
  Download sound
</a>

You can also make it more visually appealing by using a button inside the hyperlink. Here's another example:

<a href="example.com/path/to/audio.mp3" download="audio_name">
  <button class="download_button">
    Download sound
  </button>
</a>

If you don't need the class or if it's declared under a different name, feel free to change it! :)

I made a mistake, but I fixed it. I really need to be careful when helping users out. — Tethrarxitet, Jul 22 '23 at 05:41

How do I add a download button to my audio file?

2 Answers2