如何通過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的幫助！