音频循环平滑开始/结束后，通过点击开始平滑另一个循环

问：

什么有效 ：

在我的页面上，我有几个按钮（按 divs：b1、b2、b3），当我单击它们时，它们会平滑地淡入自己的声音循环中。如果我单击返回主页按钮，播放的声音会顺利淡出。音频标签是以虚拟方式创建的。

我的jQuery代码：

$(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.src = 'media/jazzy.mp3';
    audioElement.play();
    fadeInAudio(audioElement, 1000);
});

$('.b2').click(function(){
    audioElement.src = 'media/violin.mp3';
    audioElement.play();
    fadeInAudio(audioElement, 1000);
});

$('.b3').click(function(){
    audioElement.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);
}

});

现在我还想给出一个家庭场景的循环（同一网页上的初始可视化，没有 url 正在更改），这意味着使用相同的点击功能，当前音乐必须平稳停止，场景发生变化，新音乐必须平稳开始。我试图在播放和淡入效果之前在点击功能上添加淡出效果，但它不起作用。使用这种方法，循环会突然停止，淡入淡出效果消失：

$('.b1').click(function(){
    fadeOutAudio(audioElement, 1000);
    audioElement.src = 'media/jazzy.mp3';
    audioElement.play();
    fadeInAudio(audioElement, 1000);
});
$('.back-home').click(function(){
    fadeOutAudio(audioElement, 1000);
    audioElement.src = 'media/home-loop.mp3';
    audioElement.play();
    fadeInAudio(audioElement, 1000);
});

我也尝试了其他方法，例如更换 scr 等，但我无法解决问题。当然，因为我不是专业人士，所以我做我的个人网站......