HTML <audio> source download with separated button

Question

I have audio Element Here

<audio controls preload="metadata"> <source src="mp3FileName" type="audio/mpeg"> Your browser does not support the audio element. </audio>

with source "mp3FileName" I have separate download button

<a class="btn btn-primary" href="mp3FileName" download>Download audio here</a>

but when I click it it just opens _blank audio source just like that

I want to instant download when button is clicked. how can it be done?

Thanks for answers and sorry Guys I forgot that it's written on VueJs Like That

<a class="btn btn-primary" :href="mp3FileName" download>Download audio here</a>

reason why it is used :href is because "mp3FileName" is from Vue Scripts

Does this answer your question? Is it possible to initiate a download prompt in the browser for recognized MIME types using only JavaScript (client-side approach)? — Joachim Rohde
– Joachim Rohde, Commented Sep 28, 2020 at 7:08
check this sanwebcorner.com/2017/07/auto-start-download-file-using.html — rock
– rock, Commented Sep 28, 2020 at 7:29
stackoverflow.com/questions/53772331/… This Helped me kinda caused CORS issue. — donxnik
– donxnik, Commented Sep 28, 2020 at 8:48

Jeff Schaller · Accepted Answer · 2024-07-28 01:38:25Z

-2

<video src="/wave-loop.mp4" autoplay="" muted="" loop="" class="fixed overlay object-cover pointer-events-none opacity-75 hidden md:block"

2,6769 gold badges29 silver badges45 bronze badges

answered Jul 27, 2024 at 19:27

1

Sign up to request clarification or add additional context in comments.

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review