Как использовать AWS Polly PHP SDK через AJAX для потоковой передачи в аудиоплеере HTML5

Question

Цель: синтезировать речь с помощью AWS Polly PHP SDK (не javascript), вернуть аудиоблок в браузер с помощью запроса AJAX и выполнить потоковую передачу через аудиоплеер HTML5.

Пока у меня есть запрос на работу AWS и запрос AJAX, возвращающий ресурс AudioStream в браузер, но Firefox жалуется на формат:

Медиа-ресурс не может быть декодирован, ошибка: Код ошибки: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

Я не очень знаком с отладкой Chrome, но она там тоже не работает.

Ниже приведен мой код, упрощенный для краткости.

HTML:

<audio id="audioplayer" controls preload="none">
<source id="audiosource" src="" type="audio/mpeg">
</audio>

AJAX:

var xhr = new XMLHttpRequest();
var url = 'polly_ajax.php';
var params = 'voice=' + $voice + '&pollytext=' + $pollytext;
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(oEvent){
    var audioblob = new Blob([xhr.response], {type: 'audio/mpeg'});
    var objectURL = URL.createObjectURL(audioblob);
    $('#audiosource').attr('src',objectURL);
    $('#audioplayer').trigger('load');
    $('#audioplayer').trigger('play');
}
xhr.send();

PHP:

$pollyClient = new PollyClient();

$polly_result = $pollyClient->synthesizeSpeech([
    'OutputFormat' => 'mp3'
    , 'Text' => $_POST['pollytext']
    , 'VoiceId' => $_POST['voice']
]);

echo $polly_result['AudioStream']->getContents();

У меня есть две идеи о том, что делать дальше, но я не уверен, что делать дальше:

1. Используйте другой тип объекта JavaScript, а не File () (например, Blob (), MediaStream () и т. Д.)
2. Возврат данных AudioStream в другом формате вместо простого echo getContents

Вот документы Amazon Polly PHP SDK, если кому-то интересно: http://docs.aws.amazon.com/aws-sdk-php/v3/api/api-polly-2016-06-10.html

ПРИМЕЧАНИЕ: я понимаю, используя async: false не рекомендуется Я планирую использовать правильный обратный вызов, как только я получу звук воспроизведения.

Спасибо за чтение, и я ценю любую помощь!

РЕДАКТИРОВАТЬ #1: найдена ссылка, показывающая, что jQuery AJAX может возвращать только строковые ответы, а не BLOB-объекты. Обновленный блок AJAX для отображения нового кода с использованием XMLHttpRequest и обновленной ошибки, возвращаемой из FireFox

Старый код JQuery AJAX:

$.ajax({
    type: 'POST',
    async: false,
    url: 'polly_ajax.php',
    data: {
        'pollytext': $pollytext,
        'voice': $voice
    },
    success: function(response) {
        var audioblob = new File([response], {type: 'audio/mpeg'});
        var objectURL = URL.createObjectURL(audioblob);
        $('#audiosource').attr('src',objectURL);
        $('#audioplayer').trigger('load');
        $('#audioplayer').trigger('play');
    }
});

Старая ошибка Firefox:

HTTP "Content-Type" "application/octet-stream" не поддерживается. Загрузка BLOB-объекта медиаресурса: https://domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8 неудачно.

Answer 1

Нашел проблему. Страница PHP, запрашиваемая через AJAX, возвращала ошибки после перехода с jQuery AJAX на XMLHttpRequest. После того, как я решил эту проблему, я смог нормально играть с блоба с помощью вышеуказанного блока кода AJAX.

Спасибо @kopiro за помощь!