How to use AWS Polly PHP SDK via AJAX to stream in HTML5 audio player

Question

Goal : To synthesize speech via AWS Polly PHP SDK (not javascript) , return audio blob to browser via AJAX request, and stream with HTML5 audio player.

So far I have the query to AWS working and AJAX request returning the AudioStream resource to the browser, but Firefox is complaining about the format:

Media resource could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

I'm not very familiar with Chrome debugging, but it does not work there either.

Below is my code, simplified for brevity.

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();

I have two ideas of what to do next, but not sure which to follow:

1. Use a different javascript object type, instead of File() (eg Blob() , MediaStream() , etc.)
2. Return the AudioStream data in a different format, instead of simply doing echo getContents

Here's the Amazon Polly PHP SDK docs, if anyone is interested: http://docs.aws.amazon.com/aws-sdk-php/v3/api/api-polly-2016-06-10.html

NOTE: I realize using async: false is not recommended. I am planning to use a proper callback once I get the audio playing.

Thank you for reading and I appreciate any help!

EDIT #1: found link showing that jQuery AJAX can only return string responses, not blobs. Updated AJAX block to show new code using XMLHttpRequest and updated error being returned from FireFox

Old jQuery AJAX code:

$.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');
    }
});

Old Firefox error:

HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource blob: https://domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8 failed.

Answer 1

Found the issue. The PHP page that was being requested via AJAX was returning errors after switching from jQuery AJAX to XMLHttpRequest. Once I resolved that issue, I was able to play from the blob just fine with the above AJAX code block.

Thank you @kopiro for the help!