title: Force Download of MP3 in Chrome, Firefox, Safari and IE using Amazon S3
body: <p>Is there a way I can force an MP3 file to download from Amazon S3. </p>
  
  <p>I have a Download button in my Razor:</p>
  
  <pre><code> &lt;td&gt;
                  &lt;a href="@t.S3PreSignedUrl" class="js_recordingDownloadButton document-link btn btn-info btn-block br2 btn-xs fs12 @Html.Raw(t.S3PreSignedUrl.IsNullOrWhiteSpace() ? "disabled" : "")" target="_blank" data-container="body" data-toggle="tooltip" title="@t.OriginalFilename" type="@t.MimeType" download&gt;
                      &lt;span class="fa fa-cloud-download fs12"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
  </code></pre>
  
  <p>Currently, when you click on it, another browser window is opened and starts to play automatically using a Modal:</p>
  
  <pre><code>&lt;div id="js_PlayRecordingPopup" class="popup-basic mfp-with-anim modalPopup"&gt;
      &lt;div class="panel"&gt;
          &lt;div class="admin-form"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;span class="panel-title"&gt;
                      &lt;i class="fa fa-play"&gt;&lt;/i&gt; Play Recording
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="panel-body bt0 text-center p25"&gt;
  
              &lt;p class="popupInfo fs12 mb5"&gt;Playing: &lt;b class="text-info js_playingTitle"&gt;&lt;/b&gt;&lt;/p&gt;
              &lt;p class="popupInfo fs12"&gt;Filename: &lt;b class="text-info js_playingFileName"&gt;&lt;/b&gt;&lt;/p&gt;
  
              &lt;div class="summaryBox popupSummary text-center audioContainerBox"&gt;
                  &lt;audio controls controlsList="nodownload" id="audRecording"&gt;
                      Your browser does not support the audio element.
                  &lt;/audio&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="panel-footer"&gt;
              &lt;div class="text-center"&gt;
                  &lt;input type="button" class="btn btn-primary" value="Done" data-bind="click: function(){ var sound = document.getElementById('audRecording'); if(sound != undefined) { sound.pause(); sound.currentTime = 0; } $.magnificPopup.close(); }"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button title="Close (Esc)" type="button" class="mfp-close" data-bind="click: function(){ var sound = document.getElementById('audRecording'); if(sound != undefined) { sound.pause(); sound.currentTime = 0; }}"&gt;×&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way I can set it so that if I click <strong>Download</strong> it downloads the file straight away?</p>
  
  <p>This is what it looks like in the Source Code:</p>
  
  <pre><code>&lt;td&gt;
                      &lt;a href="https:url/Audio/Recordings/TES/39e7ca51-1ac8-f395-3ae6-ff814dbde6c3/39e7ca51-e77c-65f1-c88e-47fe20f67ee1/o_1cj5s0tntp3aa1011o51tlrd8ba.mp3?X-Amz-Expires=86400&amp;amp;response-content-disposition=inline%3B%20filename%3Drain-01.mp3&amp;amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;amp;X-Amz-Credential=AKIAIOHIWJAIQSFECYZQ/20180724/eu-west-1/s3/aws4_request&amp;amp;X-Amz-Date=20180724T104420Z&amp;amp;X-Amz-SignedHeaders=host&amp;amp;X-Amz-Signature=02a5febff28eed31646a37fea0b8da7d7bcf4b0ffe9a3365d31a0ac3f0b2cabb" class="js_recordingDownloadButton document-link btn btn-info btn-block br2 btn-xs fs12 " target="_blank" data-container="body" data-toggle="tooltip" title="rain-01.mp3" type="audio/mp3" download&gt;
                          &lt;span class="fa fa-cloud-download fs12"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
  </code></pre>