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?

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?

• javascript
• html
• angularjs
• http
• audio

• 1 I dont know about angular, but with XMLHttpRequest, your can set its .responseType to "blob", and then create an objectURLfrom this blob response (URL.createObjectURL(this.response)) that you will be able to pass as the src of your audio element. Otherwise, if your targeted browsers do support the AudioContextAPI, you can use the AudioContext.decodeAudioData() method. – Kaiido Commented Apr 20, 2016 at 8:54
• Thanks, your answer helped me a lot. – trahloff Commented Apr 20, 2016 at 14:13

2 Answers 2

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

in http.get you can pass a dict with optional config

$http.get(Url, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});

https://docs.angularjs/api/ng/service/$http

maybe you can bine this with the ment of @kaiido