어떻게 HTML5 오디오 플레이어에 스트리밍 할 수 AJAX를 통해 AWS 폴리 PHP SDK를 사용하는

Question

목표는 : AWS 폴리 PHP 용 SDK (자바 스크립트되지 않음) , AJAX 요청을 통해 브라우저로 오디오 덩어리를 반환 스트림을 통해 음성을 합성하려면 HTML5 오디오 플레이어.

지금까지 내가 AWS 작업 및 AJAX 요청이 브라우저에 오디오 스트림 리소스를 반환하는 쿼리를 가지고 있지만, 파이어 폭스는 형식에 대해 불평 : 나는 크롬 디버깅에 익숙하지 않다

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

하지만, 그것은 거기에서도 작동하지 않습니다.

아래 코드는 간결하게하기 위해 단순화되었습니다.

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. File() (예 : File()) 대신 다른 자바 스크립트 객체 유형을 사용하십시오. Blob(), MediaStream() 등)
2. 돌아 오디오 스트림의 다른 형식의 데이터 대신 단순히 누군가가 관심이 있다면 여기에, 아마존 폴리 PHP SDK의 문서를의 echo getContents

일 : http://docs.aws.amazon.com/aws-sdk-php/v3/api/api-polly-2016-06-10.html

참고 :async: false 사용을 권장하지 않습니다. 일단 오디오를 재생하면 적절한 콜백을 사용할 계획입니다.

감사합니다. 도움을 주셔서 감사합니다.

EDIT # 1 : jQuery AJAX는 blob이 아닌 문자열 응답 만 반환 할 수 있음을 보여주는 링크가 있습니다.

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

올드 파이어 폭스 오류 :

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

문제 발견 업데이트 AJAX 블록은 XMLHttpRequest를 업데이트 오류를 ​​사용하여 새 코드를 보여 올드 jQuery를 AJAX 코드가

파이어 폭스

에서 반환되는. AJAX를 통해 요청 된 PHP 페이지가 jQuery AJAX에서 XMLHttpRequest로 전환 한 후 오류를 반환하고있었습니다. 일단 그 문제를 해결하면 위의 AJAX 코드 블록을 사용하여 입방체에서 재생할 수있었습니다.

도움을 주신 @kopiro!