0

Im working on a simple download Webside, but instead od downloading the mp3 it is opened in the browser. How can I change this?

<!doctype html>

<head>

    <link rel="stylesheet" href="css\stylesheet.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Webseite</title>
    
</head>

<style>


</style>

<body>
    <h1>Test</h1>
    <p>Test
    </p>
    <a href="download\audio.mp3" download="audio.mp3" download="true">Download link</a>
</body>

Thanks for the help :)

Bruno w
  • 1
  • Does [this](https://stackoverflow.com/questions/14388994/forcing-a-download-using-filesmatch-in-htaccess) help? Or in case you use [PHP](https://stackoverflow.com/questions/7263923/how-to-force-file-download-with-php). To force download, the response needs custom mime type in headers. In the examples, they use `application/octet-stream`. – vee Dec 22 '21 at 17:18

1 Answers1

1

Your code works fine, but

  1. You don't need to use the download attribute twice, since most browsers will remove the last one.
  2. The download attribute only works if the file refers to the same domain. Due to security reasons, it will not be possible to download external files in modern browsers.

If you want the user to download an external file, you could manually or automatically download that file on your server and link it to the same domain. If you do, ensure that you are allowed to do this.

  • download only works for same-origin URLs, or the blob: and data: schemes.
  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
    • If the header specifies a filename, it takes priority over a filename specified in the download attribute.
    • If the header specifies a disposition of inline, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

Reza Saadati
  • 5,018
  • 4
  • 27
  • 64