save ajax return data to an array and call that array outside of ajax

Zain Shabir :

I have created an audio player. It starts from an custom array, but my audio files size was 1.6GB, It will destroy my website's data, that's why i am now using ajax data of Quran. I have created ajax call to get Quran surahs and inside ajax success function I am running for loop to get all surahs, now I wanna save data list of Surahs into an array, so i can use outside of ajax in my audio player.
Here is my code:

$(function(){

    // Surahs array and variables

    $.ajax({
        url: 'http://mp3quran.net/api/_english.php',
        type: 'get',
        success: function(data){

            let urlServer = data.reciters[112].Server;

            let resUrl;
            for(resUrl=1; resUrl <= 114; resUrl++){

                resUrl = resUrl < 10 ? '00' + resUrl : '' + resUrl;
                resUrl = (resUrl < 100 && resUrl > 9) ? '0' + resUrl : '' + resUrl;

                let surahs = urlServer + '/' + resUrl + '.mp3' ;
                console.log(surahs);

            }

        },
        error: function(err){
            console.log(err);
        }
    });

   // custom array, I wanna save here my ajax succes data like array
   // so i can use that in my custom audio player.
    let surahs = [
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3',
                    'url.mp3'
                ];

    let surahTitle = $('.surahTitle');
    let surah = new Audio();
    let currentSurah = 0;
    let surahsLength = surahs.length;

    // Every Surah source
    function nextSurahSrc(currentSurah){
        let surahTitleString = surahs[currentSurah].replace(/[_]/g, " ");
        surahTitleString = surahTitleString.replace('.mp3', "");
        surahTitleString = surahTitleString.trim();

        surah.src = webUrl + 'surahs/' + surahs[currentSurah];
        surahTitle.text(surahTitleString);
    }
    nextSurahSrc(currentSurah);

    // Play Surah
    function playSurah(){
        surah.play();
    }

    // Pause Surah
    function pauseSurah(){
        surah.pause();
    }

});

That ajax url returns a url, and if you will open that url, you will be directed to a audio mp3 directory, I am making that audio mp3 in my for loop which is in ajax call. Currently I am getting ajax data urls like this:

But i want it to save into an array. Now, can you please help me to save ajax data to an array, so i can use that array in my custom audio player. Please help me, I am stuck

Here is what I have tried with CTL's answer:

$(function(){

    let surahArray = [];
    // Surahs array and variables

    $.ajax({
        url: 'http://mp3quran.net/api/_english.php',
        type: 'get',
        success: function(data){

            let urlServer = data.reciters[112].Server;

            let resUrl;
            for(resUrl=1; resUrl <= 114; resUrl++){
                resUrl = resUrl < 10 ? '00' + resUrl : '' + resUrl;
                resUrl = (resUrl < 100 && resUrl > 9) ? '0' + resUrl : '' + resUrl;

                surahArray.push(urlServer + '/' + resUrl + '.mp3');

            }

        },
        error: function(err){
            console.log(err);

        }
    });

    let surahs = surahArray;
    // working
    console.log(surahs);

    // not working any of them
    console.log(surahs[0]);
    console.log(surahs.0);

)}

I am getting array outside of ajax but unable to get array values, Please check
Here is the screenshot of console:

CTL :

Create an empty array at the very top of your function, and push the new URL's into as they come in. Then use the array later. ie:

let surahArr = []

//..inside ajax success
surahArr.push(urlServer + '/' + resUrl + '.mp3');

//then later in your app, you can loop over them
for(let surah of surahArr){
        //do stuff with surah
}