Fetching an audio file from specific urls in ember application

I am trying to fetch the audio file which is located at a specific url as soon as the page gets loaded using ember. The final aim is to get the waveform of an audio on the webpage. I am being able to do this using drag and drop option but getting issues while trying to get it from a specific url.

the app/component/getAudio-data.js looks like this:

import Ember from 'ember';
var request = new XMLHttpRequest();
request.open("GET", "http://ift.tt/2aLUfBL", true);
request.responseType = "arraybuffer";
export default Ember.Component.extend({
  setFile: request.response,
});

the app/component/wave-form.js looks like this:

import Ember from 'ember';

export default Ember.Component.extend({
  file: null,
  arrayBuffer: null,
  audioContext: Ember.inject.service(),
  sampleRate: 2000,
  sampleRatePreview: 2000,
  node: {},

  svgPath: Ember.computed('buffer', 'sampleRate', function() {
    const buffer = this.get('buffer');

    if (buffer) {
      const sampleRate = this.get('sampleRate');
      const peaks = this._findMagnitudes(sampleRate, buffer);
      const total = peaks.length;

      let d = '';
      for(let peakNumber = 0; peakNumber < total; peakNumber++) {
        if (peakNumber%2 === 0) {
          d += ` M${~~(peakNumber/2)}, ${peaks.shift()}`;
        } else {
          d += ` L${~~(peakNumber/2)}, ${peaks.shift()}`;
        }
      }
      return d;
    }
  }),

  init({oldAttr, newAttr}){
    const file = newAttr.file.value;
    if (file){
      this.get('audioContext').decodeAudioData(file, buffer => {
          this.set('buffer', buffer);
        });
    }
  },

  _findMagnitudes(length, buffer) {//code to get peaks}

});

and app/controller/application.js is something like this:

import Ember from 'ember';

export default Ember.Controller.extend({
  file: null,
  actions: {
    setFile(file) {
      this.set('file', file);
    },
  },

});

So any idea on what should be change. Any help would be appriciable