title: Set a variable equal to ajax output that only changes when called
body: <p>I have a radio and am working on the "last song" part of the script. What I want to do is: 
  Get a url from my external php script, play the song, at the end of the song set a global variable = the current url by calling a function, when the url changes, the global variable stays the same until the function has been called again and it updates with the current song.</p>
  
  <p>Currently all of my attempts are returning an undefined or "Uncaught TypeError: Cannot set property 'innerHTML' of null" in the example below. </p>
  
  <pre><code>var data = $.ajax({
  url: '../scripts/radio.php',
  data: {
  attr1: 'value1'
  },
  success: function(data) {
  console.log(data);
  }
  });
  
  function playFirst(){
  
  var lastSong = data;
  document.getElementById("songName").innerHTML = data;
  fileChosen = true;
  setupAudioNodes();
  
  var request = new XMLHttpRequest();
  
  request.addEventListener("progress", updateProgress);
  request.addEventListener("load", transferComplete);
  request.addEventListener("error", transferFailed);
  request.addEventListener("abort", transferCanceled);
  
  request.open('GET', data, true);
  request.responseType = 'arraybuffer';
  
  // When loaded decode the data
  request.onload = function() {
  
  $("#title").html("Infinite");
  $("#album").html("Infinite");
  $("#artist").html("");
  onWindowResize();
  $("#title, #artist, #album").css("visibility", "visible");
  
  // decode the data
  context.decodeAudioData(request.response, function(buffer) {
  // when the audio is decoded play the sound
  sourceNode.buffer = buffer;
  sourceNode.start(0);
  $("#freq, body").addClass("animateHue");
  //on error
  }, function(e) {
  console.log(e);
  });
  };
  request.send();
  };
  </code></pre>