如何在jQuery中实现音量级别记忆，切换音频时保持统一音量

问题描述 #

我有一个HTML文件，可通过点击对应图片（Logo）播放多个音频。点击图片时，其所在div会添加"active"类，之前的div则移除该类，以此关联音频与对应div（及图片）。我已添加代表0-20-40-60-80-100%音量级别的按钮，这些按钮可正常工作，但切换音频（即切换"active" div）时，新音频的音量会重置，需重新设置。我希望设置音量后（比如20%），切换任意音频都保持该音量。请问如何实现这种全局音量记忆？是否可使用localStorage记录上次点击的音量级别？

当前音量控制代码 #

$('.volume').on('click', 'button', function() {
var id = $(this).attr('id')
const imgClasses2 = $('.active img.r').attr('class');
const selector2 = 'audio.' + imgClasses2.split(' ').join('.');
if (id == "0") {
$(selector2).prop('volume', 0);
} else if (id == "20") {
$(selector2).prop('volume', 0.2);
} else if (id == "40") {
$(selector2).prop('volume', 0.4);
} else if (id == "60") {
$(selector2).prop('volume', 0.6);
} else if (id == "80") {
$(selector2).prop('volume', 0.8);
} else if (id == "100") {
$(selector2).prop('volume', 1);
}}
)

解决方案 #

完全可以用localStorage实现全局音量记忆，既能在切换音频时保持音量，还能在页面刷新后保留设置。具体实现分以下几步：

1. 初始化全局音量变量 #

定义一个全局变量存储当前音量，优先读取localStorage中保存的历史设置，没有的话默认设为1（即100%音量）：

// 初始化全局音量，优先取本地存储记录，默认100%
let globalVolume = localStorage.getItem('audioVolume') ? parseFloat(localStorage.getItem('audioVolume')) : 1;

2. 修改音量按钮点击逻辑 #

点击音量按钮时，不仅要设置当前活跃音频的音量，还要更新全局变量并将值存入localStorage：

$('.volume').on('click', 'button', function() {
  const id = $(this).attr('id');
  let volumeValue;
  // 根据按钮ID匹配对应音量值
  switch(id) {
    case "0": volumeValue = 0; break;
    case "20": volumeValue = 0.2; break;
    case "40": volumeValue = 0.4; break;
    case "60": volumeValue = 0.6; break;
    case "80": volumeValue = 0.8; break;
    case "100": volumeValue = 1; break;
    default: volumeValue = 1;
  }
  // 更新全局音量并持久化到本地存储
  globalVolume = volumeValue;
  localStorage.setItem('audioVolume', globalVolume);
  // 设置当前活跃音频的音量
  const imgClasses2 = $('.active img.r').attr('class');
  const selector2 = 'audio.' + imgClasses2.split(' ').join('.');
  $(selector2).prop('volume', globalVolume);
});

3. 切换音频时同步音量 #

在切换active类的点击事件中，给新的活跃音频设置全局音量值。假设你切换音频的代码绑定在图片容器上，参考如下：

// 音频切换的点击事件示例（根据实际DOM结构调整选择器）
$('.logo-container').on('click', function() {
  // 移除之前的active类
  $('.active').removeClass('active');
  // 给当前容器添加active类
  $(this).addClass('active');
  // 获取当前音频的选择器
  const imgClasses = $(this).find('img.r').attr('class');
  const audioSelector = 'audio.' + imgClasses.split(' ').join('.');
  // 同步全局音量到当前音频
  $(audioSelector).prop('volume', globalVolume);
});

4. 页面加载时初始化默认音频音量 #

页面加载完成后，给默认带有active类的音频设置全局音量：

$(document).ready(function() {
  // 给默认活跃的音频设置全局音量
  const defaultActiveImgClasses = $('.active img.r').attr('class');
  const defaultAudioSelector = 'audio.' + defaultActiveImgClasses.split(' ').join('.');
  $(defaultAudioSelector).prop('volume', globalVolume);
});

效果说明 #

• 切换任意音频时，新音频会自动应用之前设置的音量
• 页面刷新后，依然保留上次设置的音量级别
• 代码用switch替代了原有的多个if-else，逻辑更清晰易维护

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