Wie AWS Polly PHP SDK über AJAX verwenden, in HTML5-Audio-Player

Question

Tor zu streamen: Zur Synthese von Sprache über AWS Polly PHP SDK(kein Javascript), zurückkehren Audio-Blob-Browser über AJAX-Request und Strom mit HTML5-Audioplayer.

Bisher habe ich die Abfrage AWS arbeiten und AJAX-Anforderung an den Browser, um die Audiostream Ressource zurückkehrt, aber Firefox beschwert sich über das Format:

Media resource could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

Ich bin nicht sehr vertraut mit Chrome Debugging, aber Es funktioniert auch nicht dort.

Unten ist mein Code, vereinfacht für die Kürze.

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(); 

Ich habe zwei Ideen von dem, was als nächstes zu tun, aber nicht sicher sind, welche folgen:

1. Verwenden Sie einen anderen Javascript-Objekttyp anstelle von File() (z. Blob(), MediaStream(), etc.)
2. Return der Audiostream-Daten in einem anderen Format, anstatt einfach echo getContents

Hier ist die Amazon Polly PHP SDK-Dokumentation zu tun, wenn jemand interessiert ist: http://docs.aws.amazon.com/aws-sdk-php/v3/api/api-polly-2016-06-10.html

HINWEIS : Ich realisiere mit async: false wird nicht empfohlen. Ich plane, einen richtigen Rückruf zu verwenden, sobald ich den Ton spielend bekomme.

Vielen Dank für das Lesen und ich freue mich über jede Hilfe!

EDIT # 1: Link gefunden, der zeigt, dass jQuery AJAX nur Stringantworten, keine Blobs zurückgeben kann. Aktualisiert AJAX Block neuen Code zu XMLHttpRequest und aktualisiert Fehler unter Verwendung zurückgegeben von FireFox

Alt jQuery AJAX-Code:

$.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'); 
    } 
}); 

Alt Firefox Fehler:

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

das Problem gefunden. Die PHP-Seite, die über AJAX angefordert wurde, gab nach dem Wechsel von jQuery AJAX zu XMLHttpRequest Fehler zurück. Sobald ich das Problem gelöst hatte, konnte ich mit dem obigen AJAX-Codeblock aus dem Blob ganz gut spielen.

Vielen Dank @kopiro für die Hilfe!