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

Question

目标:通过 AWS Polly PHP SDK (不是 javascript) 合成语音，通过 AJAX 请求将音频 blob 返回到浏览器，并进行流式传输带有 HTML5 音频播放器。

到目前为止，我有对 AWS 工作的查询和 AJAX 请求，将 AudioStream 资源返回到浏览器，但 Firefox 提示格式:

Media resource could not be decoded, error: Error Code: 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 block 以显示使用 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” of “application/octet-stream” is not supported. Load of media resource blob:https://domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8 failed.

Answer 1

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

感谢@kopiro 的帮助!