求助：实现Audio Loop平滑淡入淡出（当前音频无法启动）

问题根源 #

你的代码里有三个核心问题导致音频无法正常工作：

• 原生DOM的audioElement不能直接调用jQuery的animate()方法，这个方法只适用于jQuery包装后的对象
• 同时绑定了两个逻辑冲突的ended事件，而且已经设置了loop=true，完全不需要手动处理循环
• 结束按钮里直接调用pause()会打断音量降低的动画，应该等动画完成后再执行暂停和重置操作

修正后的完整代码 #

$(document).ready(function() {
    // 用jQuery创建audio元素，方便后续调用animate方法
    var $audioElement = $('<audio>', {
        loop: true,
        volume: 0
    });
    // 把audio元素添加到页面（虽不可见，但需存在于DOM中）
    $audioElement.appendTo('body');

    $('.button-start').click(function(){
        // 仅首次点击或切换音频时设置src，避免重复加载
        if ($audioElement.attr('src') !== 'media/music.mp3') {
            $audioElement.attr('src', 'media/music.mp3');
        }
        // 先启动播放，再执行音量淡入动画
        $audioElement[0].play();
        $audioElement.animate({volume: 1}, 1000);
    });

    $('.button-end').click(function(){
        // 执行音量淡出动画，完成后再暂停并重置音频
        $audioElement.animate({volume: 0}, 1000, function() {
            $audioElement[0].pause();
            $audioElement[0].currentTime = 0;
        });
    });
});

关键改动说明 #

• 改用$('<audio>')创建jQuery包装的音频对象，确保能正常使用animate()方法控制音量
• 移除多余的ended事件监听，loop: true属性已能实现自动循环播放
• 开始按钮中先调用原生play()方法（jQuery对象需取[0]获取原生DOM元素），再执行淡入动画
• 结束按钮中将暂停和重置操作放在动画回调函数内，确保音量降到0后再停止音频，避免突兀中断

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