页面加载自动启动音频及点击切换音频的功能实现问题

现有正常功能 #

页面包含三个按钮（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.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; // 设置音量为最小
        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){ // 音量足够大时停止循环
                console.clear();
                console.log("1");
                audio.volume = 1;
                clearInterval(timer);
            }
        }, stepTime);
    }

    function fadeOutAudio(audio, fadeTime){ 
        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);
            }
        }, stepTime);
    }

});

需求及问题 #

需要实现以下功能：

• 页面加载完成后（未点击任何按钮前）自动平滑启动新音频flying.mp3
• 点击b1/b2/b3按钮时，平滑停止当前播放的自动音频，再切换到对应按钮的音频
• 点击返回首页按钮时，再次平滑启动flying.mp3

尝试在addEventListener后添加以下代码实现自动播放，但无声音：

// 原有代码部分
audioElement.addEventListener('ended', function() {
    this.pause();
}, true);

// 新增的自动播放代码
audioElement.src = 'media/flying.mp3';
audioElement.play();
fadeInAudio(audioElement, 1000);

修改src属性、使用getElementById等方法后仍未解决问题。

解决方案 #

1. 突破浏览器自动播放限制 #

主流浏览器都有自动播放策略，禁止页面加载后无用户交互直接播放音频。可以通过静音预加载+后续解除静音的方式绕开限制：

// 初始化自动播放逻辑，替换原新增代码
audioElement.src = 'media/flying.mp3';
audioElement.muted = true; // 先设置静音
audioElement.play().then(() => {
    // 音频开始加载后取消静音，执行淡入
    audioElement.muted = false;
    fadeInAudio(audioElement, 1000);
}).catch(err => {
    console.log("自动播放被阻止，等待用户首次交互");
    // 若完全被阻止，绑定一次页面点击事件触发播放
    $(document).one('click', function() {
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    });
});

2. 修复按钮切换时的音频过渡逻辑 #

点击b1/b2/b3时，需要先淡出当前自动音频，完成后再加载新音频。以b1为例，其他按钮同理修改：

$('.b1').click(function(){
    // 判断当前是否在播放自动音频
    if(audioElement.src.includes('flying.mp3') && !audioElement.paused){
        fadeOutAudio(audioElement, 1000, function() {
            // 淡出完成后切换音频
            audioElement.setAttribute('src', 'media/jazzy.mp3');
            audioElement.play();
            fadeInAudio(audioElement, 1000);
        });
    } else {
        // 直接切换音频
        audioElement.setAttribute('src', 'media/jazzy.mp3');
        audioElement.play();
        fadeInAudio(audioElement, 1000);
    }
});

3. 给淡出函数添加回调支持 #

原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);
}

4. 修改返回首页按钮逻辑 #

点击返回首页时，淡出当前音频后重新启动自动音频：

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

5. 修复淡入函数的音量增量计算错误 #

原fadeInAudio中audioIncrement的计算逻辑有误，会导致音量增长异常，修正为：

function fadeInAudio(audio, fadeTime){ 
    audio.volume = 0; // 设置音量为最小
    var steps = 500;
    var stepTime = fadeTime/steps;
    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);
}

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