什么工作：
在我的页面上，我有几个按钮（按div：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);
}

}）;
现在我想给予一个循环的家庭场景也（在同一个网页上的初始可视化，没有网址是改变），这意味着与相同的点击功能，当前的音乐必须顺利停止，场景的变化，和一个新的音乐必须顺利开始。我试着在点击功能上添加淡出效果，就在播放和淡入效果之前，但它不起作用。使用此方法，循环会突然停止，淡入/淡出效果消失：

$('.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等，但我无法解决这个问题。当然，因为我不是一个专业人士，我做我的个人网站.