JS音频播放器如何添加Cookie实现静音状态跨页面记忆

核心逻辑是通过Cookie持久化存储用户的静音选择，页面初始化时优先读取Cookie配置渲染按钮状态、控制音频播放行为，用户切换静音状态时同步更新Cookie值，保证全站页面配置统一。

第一步：新增Cookie读写工具方法 #

不需要引入第三方依赖，直接在JS开头加两个极简工具函数，支持Cookie的写入和读取，配置path=/保证全站所有页面都能访问到该Cookie：

// 写入Cookie
function setCookie(name, value, days = 30) {
  const expireTime = new Date();
  expireTime.setTime(expireTime.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${value};expires=${expireTime.toUTCString()};path=/`;
}
// 读取Cookie
function getCookie(name) {
  const targetKey = `${name}=`;
  const cookieList = document.cookie.split(';');
  for (let i = 0; i < cookieList.length; i++) {
    let item = cookieList[i].trim();
    if (item.indexOf(targetKey) === 0) return item.substring(targetKey.length);
  }
  return null;
}

默认Cookie有效期30天，需要调整记忆时长直接修改setCookie的days参数即可

第二步：修改音频初始化逻辑 #

把原来直接调用radio.play()的逻辑替换为读取Cookie判断的分支逻辑：如果用户之前设置过静音，默认加载静音图标、音频设为静音、不自动播放；如果没有静音记录，默认开启声音、自动播放：

const radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;

const muteBtn = document.querySelector('#muted');
const soundOnIcon = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="声音开启" />';
const soundOffIcon = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="声音关闭" />';

// 页面初始化读取Cookie配置
const savedMuteStatus = getCookie('isRadioMuted');
if (savedMuteStatus === 'true') {
  // 记忆为静音状态：设为静音、渲染静音图标、不自动播放
  radio.muted = true;
  muteBtn.innerHTML = soundOffIcon;
} else {
  // 无静音记录/记忆为开启状态：设为非静音、渲染开启图标、自动播放
  radio.muted = false;
  muteBtn.innerHTML = soundOnIcon;
  radio.play().catch(err => {
    // 捕获浏览器自动播放限制报错，不影响功能
    console.log('自动播放被浏览器拦截，需用户手动点击开启', err);
  });
}

第三步：修改按钮点击事件 #

每次用户点击切换静音状态时，把最新的静音状态写入Cookie，保证后续跳转页面能读到最新配置：

muteBtn.onclick = function() {
  if (radio.muted) {
    // 从静音切到开启
    muteBtn.innerHTML = soundOnIcon;
    radio.muted = false;
    // 之前暂停的话手动触发播放
    if (radio.paused) radio.play();
  } else {
    // 从开启切到静音
    muteBtn.innerHTML = soundOffIcon;
    radio.muted = true;
    radio.pause();
  }
  // 同步更新Cookie
  setCookie('isRadioMuted', radio.muted);
}

原有CSS和HTML无需修改 #

原有样式和DOM结构可以直接保留，JS初始化时会自动覆盖按钮的默认图标，不会出现图标和状态不匹配的问题：

.size_sound_alert{
    width: 30px;
}

.sound_label{
    position: fixed;
    margin-bottom: %;
    margin-left: 95%;
    top: 90%;
    z-index: 9999;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .sound_label {
        position: fixed;
        margin-bottom: %;
        margin-left: 85%;
        top: 90%;
    }
}

额外给按钮加了cursor: pointer优化交互体验，不需要可以删掉

<div id="muted" class="sound_label">
  <img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />
</div>

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