Play a binary string with the HTML audio tag

Question

I have a server that serves ogg encoded audio to a client that requests it with a http GET. If I inject the GET route into the HTML audio src it receives the audio and plays it:

function working(text) {
    var downloadURL = 'http://localhost:8080/nlc/synthesize' +
        '?text=' + encodeURIComponent(text);

    audio.pause();
    audio.src = downloadURL;
    audio.play();

};

If I use a http GET call (in AngularJS) and try to inject the response into the HTML audio src it won't play it:

function not_working(text) {
  $http.get('http://localhost:8080/nlc/synthesize' + '?text=' + encodeURIComponent(text)).then(function(response) {
      console.log(response);
      audio.pause();
      audio.src = encodeURIComponent(response);
      audio.play();

};

The log of the response shows a JSON with a binary string at the 'data' key:

Object {data: "OggS�1�/ڂ OpusHead��]OggS…�xs���������������������������������", status: 200, config: Object, statusText: "OK"}

Is there a way to decode the http GET response into something I can inject into the audio src?

Answer 1

I finally managed to do it with this code:

function working(text) {
    var url = 'http://localhost:8080/nlc/synthesize';
    var req = {
        method: 'POST',
        url: url,
        responseType: 'blob',
        data: {
            "text": text
        },
        headers: {
            'Content-Type': 'application/json',
        }
    }

    $http(req).then(function(response) {
        console.log(response);
        audio.pause();
        audio.src = URL.createObjectURL(response.data);
        audio.play();
    })
};