如何在JavaScript ajax调用中从PHP passthru获取二进制数据？

Question

I want to get an audio file from a server in JavaScript and play it. But the ajax call in my code never seems to callback, and I am also unsure whether I handle the audio in JavaScript correctly.

The following PHP file returns the audio file on the server:

<?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;
?>

The script is called from JavaScript using ajax and the returned audio data is replayed in the browser (at least thats what should happen):

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

What am I doing wrong here?

Answer 1

jQuery ajax does not support typed responses, so you're going to get text as result in your success callback.

You can use bare XMLHTTPRequest to get a binary response

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

There is also a plugin that patches jquery to support it https://github.com/acigna/jquery-ajax-native

Also your your audio processing code looks incorrect. buffers[0] doesn't make sense since an arraybuffer doesn't have numeric properties