Скачанный AJAX / Jquery MP3 файл поставляется пустым

Question

AJAX запрашивает PHP скрипт и загружает файл MP3. Приглашение на загрузку появляется в клиентском браузере и загружает файл без проблем. Проблема в том, что загруженный файл не может быть открыт в плеере. Кажется, что файл проходит через AJAX либо поврежден, либо неправильно отформатирован. Без AJAX все работает. Что не так?

PHP скрипт

<?php

$mp3_file = 'song.mp3'; //the actual file you want to download

header('Content-Type: audio/mpeg');
header('Content-Disposition: attachment; filename='.basename($mp3_file));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($mp3_file));
readfile($mp3_file);
exit;
?>

Javascript код

$.ajax({
    url: "php-script.php",
    type: "POST",
    data: {"variableName" : 'some value'},
    dataType:"text",
    success: function (_data) {
        var blob = new Blob([_data]);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'song.mp3'; // the filename you want to give
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        alert('The download prompt was opened');
    },
    error: function() {
        alert('Something went wrong!');
    }
});

Answer 1

Наконец asyn c функция и fetch () работали для меня. JavaScript код.

async function fetch(data1, data2) {
                    await fetch('myurl.php', {
                        method: "POST",
                        body: 'data1=' + data1 + '&data2=' + data2,
                        headers:
                                {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                    'Cache-Control': 'no-cache',
                                    'Expires': '-1'

                                }

                    }).then(res => {
                        //Do some staff
                        if (res.ok) {
                            return res.blob();

                        } else {
                            throw new Error(res.statusText);
                        }
                    }).then(resblob => {
                                if (resblob != undefined) {
                                var blob = new Blob([resblob]);                          
                                const url = window.URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.style.display = 'none';
                                a.href = url;
                                a.download = 'yourfilename.mp3'; // the filename you want to give
                                document.body.appendChild(a);
                                a.click();
                                window.URL.revokeObjectURL(url);

                    }

                }).catch(reason => {
                    alert("Unable to load blob file.");

                });

Answer 2

Медиа-файлы - это двоичные данные, но вы говорите jQuery ожидать текст.

    dataType:"text",

Я не помню, может ли jQuery даже сделать двоичный ответ, подобный этому. Я не вижу, чтобы это упоминалось в их документации. Вам лучше использовать Fetch API, который хорошо поддерживается в течение многих лет .

Примерно так:

const res = await fetch('php-script.php');
if (!res.ok) {
  // Throw error or something here
}
const blob = await res.blob();