网页音频循环平滑切换问题：点击按钮实现无缝淡入淡出切换

问题背景 #

现有页面功能：通过div实现的按钮b1、b2、b3，点击时可平滑淡入对应循环音频；点击返回首页按钮可平滑淡出当前播放音频，音频标签为动态创建。原有核心代码如下：

$(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);
});

故障原因 #

JavaScript为异步执行机制，fadeOutAudio内部的setInterval属于异步任务，不会阻塞后续代码执行。调用fadeOutAudio后立刻修改音频源并播放，会直接中断当前的淡出过程，导致音频强制切换，失去平滑过渡效果。同时原fadeInAudio函数中的音量增量计算存在逻辑错误，进一步导致淡入效果异常。

修复方案 #

1. 为淡出函数添加回调机制 #

修改fadeOutAudio，增加回调参数，确保只有在淡出完全完成后，才执行音频切换与淡入操作：

function fadeOutAudio(audio, fadeTime, callback){ 
    audio.volume = 1;
    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){
            console.clear();
            console.log("0");
            audio.volume = 0;
            audio.pause(); 
            clearInterval(timer);
            // 淡出完成后执行回调
            if (typeof callback === 'function') {
                callback();
            }
        }
    }, stepTime);
}

2. 修复淡入函数的音量增量计算 #

原fadeInAudio中音量增量计算逻辑错误，修正为从0到1的均匀步长：

function fadeInAudio(audio, fadeTime){ 
    audio.volume = 0;
    var steps = 500;
    var stepTime = fadeTime/steps;
    // 修正增量计算：每步增加1/总步数
    var audioIncrement = 1 / steps;

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

        if (audio.volume >= 0.99){
            console.clear();
            console.log("1");
            audio.volume = 1;
            clearInterval(timer);
        }
    }, stepTime);
}

3. 调整按钮点击事件逻辑 #

通过回调实现“淡出→切换音频→淡入”的顺序执行，同时处理音频未播放的边界情况：

$('.b1').click(function(){
    if (!audioElement.paused) {
        // 音频正在播放，先淡出再切换
        fadeOutAudio(audioElement, 1000, function() {
            audioElement.src = 'media/jazzy.mp3';
            audioElement.play();
            fadeInAudio(audioElement, 1000);
        });
    } else {
        // 音频未播放，直接启动淡入
        audioElement.src = 'media/jazzy.mp3';
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    }
});

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

$('.b3').click(function(){
    if (!audioElement.paused) {
        fadeOutAudio(audioElement, 1000, function() {
            audioElement.src = 'media/esoteric.mp3';
            audioElement.play();
            fadeInAudio(audioElement, 1000);
        });
    } else {
        audioElement.src = 'media/esoteric.mp3';
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    }
});

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

4. 清理冲突的音频结束事件 #

原代码中添加了两个冲突的ended事件监听，一个触发循环播放，一个触发暂停，需移除其中一个（保留循环播放逻辑）：

// 保留循环播放的监听
audioElement.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
// 移除冲突的暂停监听
// audioElement.addEventListener('ended', function() {
//     this.pause();
// }, true);

内容的提问来源于stack exchange，提问作者Igor Laszlo