Принудительная загрузка MP3 в Chrome, Firefox, Safari и IE с помощью Amazon S3

Есть ли способ заставить файл MP3 скачать с Amazon S3.

У меня есть кнопка Download в моей Razor:

 <td>
                <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>
                    <span class="fa fa-cloud-download fs12"></span>
                </a>
            </td>

В настоящее время, когда вы нажимаете на него, открывается другое окно браузера и автоматически начинает играть, используя модальное:

<div id="js_PlayRecordingPopup" class="popup-basic mfp-with-anim modalPopup">
    <div class="panel">
        <div class="admin-form">
            <div class="panel-heading">
                <span class="panel-title">
                    <i class="fa fa-play"></i> Play Recording
                </span>
            </div>
        </div>

        <div class="panel-body bt0 text-center p25">

            <p class="popupInfo fs12 mb5">Playing: <b class="text-info js_playingTitle"></b></p>
            <p class="popupInfo fs12">Filename: <b class="text-info js_playingFileName"></b></p>

            <div class="summaryBox popupSummary text-center audioContainerBox">
                <audio controls controlsList="nodownload" id="audRecording">
                    Your browser does not support the audio element.
                </audio>
            </div>

        </div>

        <div class="panel-footer">
            <div class="text-center">
                <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(); }">
            </div>
        </div>
    </div>
    <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; }}">×</button>
</div>

Есть ли способ настроить его так, чтобы, если я нажму " Загрузить", он сразу же загрузит файл?

Вот как это выглядит в исходном коде:

<td>
                    <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;response-content-disposition=inline%3B%20filename%3Drain-01.mp3&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIOHIWJAIQSFECYZQ/20180724/eu-west-1/s3/aws4_request&amp;X-Amz-Date=20180724T104420Z&amp;X-Amz-SignedHeaders=host&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>
                        <span class="fa fa-cloud-download fs12"></span>
                    </a>
                </td>
Источник

2 ответа

Решение

  1. Ты можешь измениться Content-Type на ответ на Content-Type: application/octet-stream, Хотя также настройка Content-Disposition: attachment; filename="filename.mp3", Убедитесь, что имя файла использует кодировку, определенную в RFC 5987

  2. Я вижу, вы уже нашли download атрибут в HTML5, но вы не указали имя файла. Это следует использовать так:

<a href="pathtofile.mp3" download="filename">

  1. Вы всегда можете протестировать этот файл download.js, написанный dandavis. Если это работает, вы можете изменить его код.
Источник

В эти выходные (август 2022 г.) я работал над решением с использованием S3 позади CloudFront; и, поскольку Amazon недавно обновил функции CloudFront, чтобы сделать это довольно легко, я хотел поделиться тем, как я нашел решение, на случай, если оно может понадобиться кому-то еще, пока вы работаете с документацией Amazon .

Как это работает

  • Пример ссылки для прослушивания:

    https://d111111abcdef8.cloudfront.net/audio.mp3

    (играет в браузере)

  • Пример ссылки для скачивания:

    https://d111111abcdef8.cloudfront.net/audio.mp3?title=Custom%20Title%20for%20File

    (принудительно загружает файл .mp3 с пользовательским именем файла: CustomTitlefor Downloaded File.mp3 )

Мое решение:

  1. Вот код моей пользовательской функции CloudFront, который вы можете использовать в качестве примера, чтобы помочь вам написать то, что вам нужно:
      function handler(event) {
    //This is a viewer response function.
    
    var request = event.request;
    var uri = request.uri;
    var qs = request.querystring;
    //console.log ('qs: ' + qs);
    
    var response = event.response;
    var headers = response.headers;
    
    if(!qs.title) {
        //console.log('No- qs title');
    } else{
        var title = qs.title.value;
        title = decodeURIComponent(title);
        title = title.split('+').join(' ');
        //console.log('Yes- qs title LEN: ' + title.length);
        
        if (uri.endsWith('.mp3')) {
            var fileType = '.mp3';
            var fileName = title + fileType;
            //console.log('fileName: ' + fileName);
            var disposition = "attachment; filename=" + fileName;
            //console.log('disposition:' + disposition);
            
            headers['content-disposition'] = { value: disposition };
        }
    }
   
    return response;
}
  1. Я настроил свой дистрибутив CloudFront для нового поведения :
  • Шаблон пути: "*"
  • Происхождение: мое ведро S3
  • Политика кэширования для поиска и принятия только ключа «title» в строке запроса uri.
  • Политика запроса источника, чтобы также искать и принимать только ключ «название» в строке запроса uri.
  • Связал мою пользовательскую функцию CloudFront (см. выше) с типом функции ответа средства просмотра
Источник
Другие вопросы по тегам