2

目标：通过 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>

阿贾克斯：

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 错误：

不支持“application/octet-stream”的 HTTP“Content-Type”。加载媒体资源 blob：https://domain.tld/dc7619e0-ff93-4438-899b-84d641436bc8失败。

4

1 回答 1

0

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

谢谢@kopiro 的帮助！

于 2018-01-03T18:59:09.073 回答