咨询音频播放/静音设置Cookie实现及现有脚本功能

嘿，我来帮你理清楚这个问题～

原有JS脚本的功能 #

原脚本的作用很明确，就是给页面的背景音频做一个静音/取消静音的切换控制：

• 先获取页面上ID为background_audio的音频元素
• 给ID为mute的链接按钮绑定点击事件监听
• 每次点击时，切换音频的静音状态（audio.muted = !audio.muted，相当于取反当前状态：静音变非静音，非静音变静音）
• 最后调用e.preventDefault()阻止链接的默认跳转行为，避免点击后页面跳转到顶部锚点

新增Cookie保存状态的实现 #

如果想要页面刷新或重新打开后，依然保留用户之前设置的静音/播放状态，我们可以通过Cookie来持久化这个状态。下面是完整的实现代码和说明：

修改后的完整JS代码 #

// 获取页面元素
var audio = document.getElementById('background_audio');
var muteControl = document.getElementById('mute');

// 从Cookie读取之前保存的静音状态
function getSavedMuteStatus() {
    const cookies = document.cookie.split(';');
    for (const cookie of cookies) {
        const [key, value] = cookie.trim().split('=');
        if (key === 'audioMuted') {
            return value === 'true';
        }
    }
    // 默认返回非静音状态
    return false;
}

// 页面加载时恢复状态
audio.muted = getSavedMuteStatus();

// 将当前静音状态保存到Cookie
function saveMuteStatus(isMuted) {
    // 设置Cookie有效期为30天，可按需调整
    const expiry = new Date();
    expiry.setDate(expiry.getDate() + 30);
    document.cookie = `audioMuted=${isMuted}; expires=${expiry.toUTCString()}; path=/`;
}

// 绑定点击事件，同时处理状态保存
muteControl.addEventListener('click', function(e) {
    e = e || window.event;
    // 切换静音状态
    audio.muted = !audio.muted;
    // 同步保存到Cookie
    saveMuteStatus(audio.muted);
    // 阻止链接默认行为
    e.preventDefault();
}, false);

代码逻辑说明 #

1. 状态恢复：页面加载时，getSavedMuteStatus()函数会遍历所有Cookie，查找名为audioMuted的项，解析出之前保存的状态，然后设置音频的muted属性，实现打开页面时自动恢复用户上次的设置
2. 状态保存：每次点击按钮切换状态后，saveMuteStatus()会把当前的静音状态写入Cookie，设置了30天的有效期，并且指定path=/确保全站页面都能读取这个Cookie
3. 兼容性处理：保留了e = e || window.event的写法，兼容旧版浏览器的事件对象

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