如何通过AJAX使用AWS Polly PHP SDK在HTML5音频播放器中进行流传输

Question

目标 ：要通过AWS Polly PHP SDK （不是javascript）合成语音，通过AJAX请求将音频blob返回到浏览器，并使用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不建议使用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的“应用程序/八位字节流”的“内容类型”。 媒体资源Blob的加载： https：//domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8失败。

Answer 1

找到了问题。 从jQuery AJAX切换到XMLHttpRequest之后，通过AJAX请求的PHP页面返回错误。 一旦解决了该问题，就可以使用上面的AJAX代码块从Blob正常播放。

谢谢@kopiro的帮助！