使用jQuery实现音频播放暂停、按钮显隐及FontAwesome图标切换求助

原代码核心问题 #

• 音频实例audio作用域被限制在独立的$(document).ready块中，其余业务逻辑无法访问该实例
• 图标状态判断逻辑未绑定到点击事件回调内，仅在页面加载时执行一次，无法响应交互
• 事件绑定分散重复，未和需求逻辑对应

修正后完整JS代码 #

$(document).ready(function(){
    // 全局声明音频实例，所有事件可访问
    var audio = new Audio('/audio.mp3')
    var $button = $('#button')
    var $soundIcon = $('#sound i')

    // 点击button按钮的逻辑，对应需求1
    $button.click(function(){
        // 隐藏按钮
        $button.hide();
        // 切换图标为音量开启状态
        $soundIcon.removeClass('fa-volume-mute').addClass('fa-volume-up');
        // 加载并播放音频
        audio.load();
        audio.play();
    });

    // 点击音量图标的逻辑，对应需求2
    $soundIcon.click(function(){
        // 仅当前为音量开启状态时触发操作
        if ($soundIcon.hasClass('fa-volume-up')) {
            // 暂停音频
            audio.pause();
            // 切换图标回静音状态
            $soundIcon.removeClass('fa-volume-up').addClass('fa-volume-mute');
            // 重新显示button按钮
            $button.show();
        }
    })
});

你的HTML代码无需调整即可正常运行。

内容的提问来源于stack exchange，提问作者Saptarshi Das