Why is my ajax call refreshing the page?

Try using preventDefault(), it’s a jQuery function for preventing default actions called by the browser.

First you should call an event handler by firing up your submitter. You can do this as follow:

$('#my_upload_form').submit(function (event) {

After catching a submit and giving an event with it, you should prevent the default refresh of a browser:

event.preventDefault();

Now your code will look as follow:

$('#my_upload_form').submit(function (event) {

    event.preventDefault();

    var css="font:Helvetica; color:red; font-size:1.5em; padding:inherit;";
    var html="<strong><em> " + '<p style="' + css + '">' + '*';
    var endHtml="</p></em></strong>";

    var formData = new FormData();
    var fileArray = jQuery('#my_file_input').prop('files');

    if(fileArray.length > 0) {
        var theTrack = fileArray[0];
        formData.append("music", theTrack);
    } else {
      jQuery('#my_error_report').html( html + 'no track selected' + endHtml );
      return false;
    }

    $.ajax({
      url: '/wp-admin/admin-ajax.php',
      type: 'POST',
      // async: false,
      data: {
          action      : 'my_track_upload',
          some_data   : formData
      },
      // dataType: 'text'
      }).success( function( data ) {
          /* You win! */
          alert('ajax was called success');
      }).fail( function( data ) {
          /* You lose, show error */
          alert('ajax was called failure');
    });
});

BTW: Always try to place preventDefault() on top of the function, it should prevent the default action before anything else is done.