JavaScript ajaxコールでPHPパススルーからバイナリデータを取得するにはどうすればよいですか？

Question

JavaScriptを使ってサーバーからオーディオファイルを取得して再生したいと考えています。しかし、私のコードのajax呼び出しは決してコールバックのようではなく、JavaScriptで正しくオーディオを扱うかどうかもわかりません。

次のPHPファイルは、サーバー上のオーディオファイルを返します。

<?php 
    header('Access-Control-Allow-Origin: *'); 
    $name = './audiofiles/audio.wav'; 
    $fp = fopen($name, 'rb'); 
    header("Content-Type: binary"); 
    header("Content-Length: " . filesize($name)); 
    fpassthru($fp); 
    exit; 
?> 

（少なくともどうするかthatsの）スクリプトはAJAXを使用して、JavaScriptから呼び出され、返されたオーディオデータをブラウザで再生されます。

function playSample(e,q) { 
    console.log("requesting audio from server") 
    $.ajax({ 
    url: "https://audioserver.com/getaudio.php", 
    type: "GET", 
    dataType: "arraybuffer", 
    processData: false, 
    success: function(result){ 
     console.log("received audio, starting to play now") 
     var buffers = result; 
     var newSource = audioContext.createBufferSource(); 
     var newBuffer = audioContext.createBuffer(2, buffers[0].length, 16000); 
     newBuffer.getChannelData(0).set(buffers[0]); 
     newSource.buffer = newBuffer; 
     newSource.connect(audioContext.destination); 
     newSource.start(0); 
    } 
    }); 
} 

私はここで間違っていますか？

Answer 1

jQuery ajaxは型付き応答をサポートしていないため、成功コールバックの結果としてテキストを取得します。

あなたは

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){ 
     //this.response is the array buffer for you to manipulate 
    } 
} 
xhr.open('GET', 'https://audioserver.com/getaudio.php'); 
xhr.responseType = 'arraybuffer'; 
xhr.send();  

バイナリ応答を取得するために裸のXMLHTTPRequestをを使用することができますhttps://github.com/acigna/jquery-ajax-nativeに

それをサポートするためにjqueryのをパッチプラグインはまた、あなたのオーディオ処理コードが間違って見えるもあります。 buffers[0]配列バッファに数値プロパティがないので意味がありません