Steps to execute a download function in jQuery for retrieving an audio file

I am facing a challenge in creating a download button that should, upon clicking, locate the URL of the current playing song and initiate the download process. However, pressing the button currently opens the file location instead of downloading it. I am aware that server-side settings can be adjusted to enable attachment downloads, but unfortunately, I do not have access to the server in this particular scenario.

var downloadButton = $("button");
var songURL = "shorturl.at/cfikM";

downloadButton.on("click", function(){
   top.location.href = songURL;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>
The desired functionality is similar to: 
<a href="URL" download> Download </a>

Any suggestions on how to achieve this?

javascriptbrowserhref

Answer №1

Here's a little trick you can experiment with:

Create a hidden href link that leads to the desired file for download:

<a style="visibility: hidden" id="lelink" href="http://some.file.url" download="w3logo">Download me</a>

Next, utilize Jquery to define the button's functionality and simulate a "link-click":

button.on("click", function(){
   document.querySelector("#lelink").click()
})

Note that using this method will display the link's contents in the same tab, essentially acting as a redirect.

If your goal is to have the file downloaded without redirecting the tab, this approach may not be suitable.

I hope this explanation proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

javascriptcsstinymce

Exploring solutions for handling asynchronous issues with vue3-google-map

While working with a Vue library for managing Maps called vue3-google-map, I encountered an issue when trying to define certain polylines that would not allow me to select the center of the marked area: Here is my map template: <template> <Goo ...

javascriptvue.jsasynchronousvuejs3quasar-framework

eliminate white pixels from the ImageData on the canvas

I've come across a challenge with my HTML images - they have a white background that I need to remove. My initial thought is to make all white pixels transparent, however, I'm unsure of how to do this using only HTML and JavaScript. Any advice wo ...

javascripthtmlcanvas

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

My main goal with the checkbox click event is to achieve the following objectives: 1] Create a button with the id = 'id-of-checkbox'+'some-character-here' in a specific div. 2] Clicking on that button will remove both the button and ...

javascripthtmlcheckbox

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...

javascriptpythonhtmlajaxdjango

Scraping multiple websites using NodeJS

I have been immersing myself in learning NodeJS and experimenting with web scraping a fan wikia to extract character names and save them in a json file. I currently have an array of character names that I want to iterate through, visiting each URL in the a ...

javascriptjsonnode.js

Sorting an array in JavaScript based on date values in descending order when a specific value is present

I've been attempting to sort data in descending order based on the publishDate, but I'm encountering some issues. Some arrays contain the publishDate, while others do not. [ { "id": "brexit-delay", "title": "Brexit Delay", ...

javascriptarraysnode.jssorting

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

Why can my JavaScript server code read "2011" but not "20,11" when both are formatted as strings?

Currently, I am trying to establish a connection between Storm and JavaScript through redis. While the redis aspect of the connection is functioning correctly, I am encountering an issue when attempting to publish tuples (essentially Strings). Even though ...

javascriptexpressredissocket.ioapache-storm

Tips for creating a versatile function in TypeScript that accepts either a single value or an array of values for two parameters

I'm currently working on a task to develop a versatile function that accepts a parameter called hashMapName, another parameter called 'keys' which can be either a string or an array of strings, and a callback function that will return either ...

javascripttypescriptgenericsecmascript-6

Converting an Array of Strings into Objects

I need to convert an array of strings, each with comma separated values, into an array of objects. Here is an example: var myarray = [ "a1,b1,c1,d1", "a2,b2,c2,d2", "a3,b3,c3,d3" ] This should be transformed into: [ { "field1": "a1", "fiel ...

javascriptdestructuring

Can Regex expressions be utilized within the nodeJS aws sdk?

Running this AWS CLI command allows me to retrieve the correct images created within the past 45 days. aws ec2 describe-images --region us-east-1 --owners self -- query'Images[CreationDate<`2021-12-18`] | sort_by(@, &CreationDate)[].Name&apos ...

javascriptnode.jsregexamazon-web-servicesaws-sdk

What is the best way to break out of the outermost if statement when it is nested within another if statement?

Currently, I am exploring the capabilities of the HTML5 speech recognition API to display spoken words on the screen. In my experiment, I have set up a trigger word that needs to be said first before other words can be detected, similar to how Apple's ...

javascripthtmlif-statementspeech-recognition

Newly inserted JSON component remains invisible

I am currently using express.js to create an API. My mongoose is returning a JSON object and I need to append an element to each item in the result.docs. This is how I am attempting to achieve that: for(let a in result.docs) { result.docs[a].link ...

javascriptjsonnode.jsexpress

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

javascripthtmlcsscarousel

What's the reason for switching from a custom tab icon to a React icon?

I've encountered a strange issue while working on my app - the tab icon keeps changing from the one I've set to the ReactJS icon whenever I navigate between different routes. I have linked the icon correctly in my HTML file, so I'm not sure ...

javascripthtmlvue.jsvuejs2

Are these two sections of my code distinctive in functionality? Do they both address potential errors in the same manner?

After receiving some helpful suggestions on my code from a user on stack overflow, I decided to revisit and make improvements. However, I am now questioning whether the changes I made handle errors in the same way as the original code. This is my initial ...

javascriptnode.jsexpress

What's the best way to establish a victorious player in a game of Tic

I've been struggling to find a solution for determining the winner using WinCombos. Is there a way to compare the elements in my winCombos array with the cells of a 3x3 tic tac toe board to identify the winner? var player1 = "X"; var player2 = "O"; ...

javascripttic-tac-toe

Guide to filtering an array within ag-grid when defining a column

After switching from using DataTable to ag-grid, I encountered a challenge. In DataTable, I accessed the first element from the attributes array where typeName='ItemType'. Now, I am looking to achieve the same functionality in ag-grid. Any sugges ...

javascriptjqueryangularjsag-grid

What steps can be taken to restrict users to providing only one comment and rating for each item?

In the backend controller, I have the following code snippet: 'use strict'; var Comment = require('../../../models/comment'); module.exports = { description: 'Create a Comment', notes: 'Create a comment&apos ...

javascriptangularjsconditional-statements