如何通过 AJAX 使用 AWS Polly PHP 开发工具包在 HTML5 音频播放器中进行流式传输

Question

目标：要通过 AWS PollyPHP 开发工具包(不是 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>

阿贾克斯：

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. 以不同的格式返回音频流数据，而不是简单地执行echo getContents

以下是 Amazon Polly PHP 开发工具包文档，如果有人感兴趣的话：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');
}
});

旧火狐错误：

不支持"application/octet-stream"的 HTTP"内容类型"。媒体资源 blob：https：//domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8 加载失败。

Answer 1

发现问题。通过 AJAX 请求的 PHP 页面在从 jQuery AJAX 切换到 XMLHttpRequest 后返回错误。一旦我解决了这个问题，我就可以使用上面的 AJAX 代码块从 blob 中播放。

谢谢@kopiro的帮助！