实现步骤：

1. 监听页面可见性变化： 使用浏览器提供的 visibilitychange 事件来检测页面是否被用户切换到后台或重新激活。

2. 控制音频播放状态： 根据页面的可见性（document.hidden 属性），来控制音频的播放和静音。

下面是一个在 Cocos Creator 中实现的示例代码：

cc.Class({
    extends: cc.Component,

    properties: {
        backgroundMusic: {
            default: null,
            type: cc.AudioClip
        }
    },

    onLoad () {
        // 监听页面可见性变化事件
        document.addEventListener("visibilitychange", this.onVisibilityChange.bind(this), false);
        
        // 播放背景音乐
        if (this.backgroundMusic) {
            cc.audioEngine.playMusic(this.backgroundMusic, true);
        }
    },

    onVisibilityChange () {
        if (document.hidden) {
            // 页面被隐藏（切换到后台），静音背景音乐
            cc.audioEngine.pauseMusic();
        } else {
            // 页面被显示（切换回前台），恢复背景音乐播放
            cc.audioEngine.resumeMusic();
        }
    },

    onDestroy () {
        // 移除事件监听
        document.removeEventListener("visibilitychange", this.onVisibilityChange.bind(this), false);
    }
});

• onLoad 方法： 在组件加载时，添加 visibilitychange 事件监听器，并播放背景音乐（如果有）。cc.audioEngine.playMusic 用于播放背景音乐。

• onVisibilityChange 方法： 当页面的可见性变化时，检测 document.hidden 的状态。如果页面变为隐藏状态（document.hidden 为 true），调用 cc.audioEngine.pauseMusic() 来暂停背景音乐；如果页面恢复可见状态（document.hidden 为 false），调用 cc.audioEngine.resumeMusic() 来恢复背景音乐播放。

• onDestroy 方法： 在组件销毁时，移除 visibilitychange 事件监听器，确保不再监听页面可见性变化。

通过这种方式，你的游戏在用户切换到其他浏览器页面时会自动静音背景音乐，提供了更好的用户体验和页面行为的控制。