How to start sound after page load and change by click function

Question

What works :

On my page I have several buttons (by divs: b1, b2, b3) and when I click them they fadeIn their own sound loop smoothly. If I click on the back home button, the played sound fadeOut smoothly. The audio tag is created dinamically.

My jQuery codes:

$(document).ready(function() {

    var audioElement = document.createElement('audio');
    audioElement.id       = 'audio-player';
    audioElement.loop=true;
    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
    audioElement.addEventListener('ended', function() {
        this.pause();
    }, true);
    
    $('.b1').click(function(){
        audioElement.setAttribute('src', 'media/jazzy.mp3');
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    });
    
    $('.b2').click(function(){
        audioElement.setAttribute('src', 'media/violin.mp3');
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    });
    
    $('.b3').click(function(){
        audioElement.setAttribute('src', 'media/esoteric.mp3');
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    });

    $('.back-home').click(function(){
        fadeOutAudio(audioElement, 1000);
    });

    function fadeInAudio(audio, fadeTime){ 
        audio.volume = 0; // set volume to the minimum 
        var steps = 500;
        var stepTime = fadeTime/steps;
        var audioIncrement = parseFloat(audio.volume + ("0.00" + steps));

        var timer = setInterval(function(){
            audio.volume += audioIncrement;
            console.clear();
            console.log(audio.volume);

            if (audio.volume >= 0.99){ //if its already audible stop the loop
                console.clear();
                console.log("1");
                audio.volume = 1;
                clearInterval(timer);
            }
        }, stepTime);
    }

    function fadeOutAudio(audio, fadeTime){ 
        audio.volume = 1; // set volume to the maximum 
        var steps = 150;
        var stepTime = fadeTime/steps;
        var audioDecrement = audio.volume / steps;

        var timer = setInterval(function(){
            audio.volume -= audioDecrement;
            console.clear();
            console.log(audio.volume);

            if (audio.volume <= 0.03){ //if its already inaudible stop the loop
                console.clear();
                console.log("0");
                audio.volume = 0;
                audio.pause(); 
                clearInterval(timer);
            }
        }, stepTime);
    }

});

What I would like but does not work :

When I load the page (and buttons are not clicked yet), a new sound should start smoothly. Stopped smoothly by clicking those buttons, and when I come back home (it is on same page), it starts again smoothly.

The method what I tried is the following codes what I put just after the addEventListener, but there is no sound to start on home scene after loading:

// it is the part of the existed codes
audioElement.addEventListener('ended', function() {
    this.pause();
}, true);

// from here I added my new codes
audioElement.src = 'media/flying.mp3';
audioElement.play();
fadeInAudio(audioElement, 1000);

I also tried many other things, like changing the src attribute, or with getEelementById, but I certainly do not recognize the problem because nothing works for me.