JavaScript音频切换src失效及图片切换代码优化咨询

音频 src不更新的解决方法 #

修改<source>的src后浏览器不会自动重新加载音频资源，因为音频元素已完成初始化。可以通过两种方式解决：

• 直接修改<audio>元素的src属性（单音频源场景更推荐）：

  const audioPlayer = document.getElementById('audioPlayer');
  // 更新音频地址
  audioPlayer.src = `audio${Num}.mp3`;
  // 调用load方法确保资源重新加载（部分浏览器可能自动触发，但显式调用更稳妥）
  audioPlayer.load();
  

• 若必须操作<source>元素，修改src后调用音频元素的load()方法：

  const sourceEl = document.querySelector('audio source');
  sourceEl.src = `audio${Num}.mp3`;
  document.getElementById('audioPlayer').load();
  

执行后音频元素会重新读取新的资源地址，即可正常加载对应音频。

图片切换脚本的代码优化 #

假设你原脚本中每次切换都重复编写修改图片src、文本内容的代码，可以将这部分逻辑封装为独立函数，消除重复：

优化前（重复代码示例） #

// 上一页按钮逻辑
document.getElementById('prevBtn').onclick = () => {
  if (pgNum > 1) {
    pgNum--;
    document.getElementById('img').src = `img${pgNum}.jpg`;
    document.getElementById('text').textContent = `第${pgNum}页内容`;
  }
};

// 下一页按钮逻辑
document.getElementById('nextBtn').onclick = () => {
  if (pgNum < 5) {
    pgNum++;
    document.getElementById('img').src = `img${pgNum}.jpg`;
    document.getElementById('text').textContent = `第${pgNum}页内容`;
  }
};

优化后（封装函数） #

// 封装更新UI的函数
function updatePageContent(pageNum) {
  const imgEl = document.getElementById('img');
  const textEl = document.getElementById('text');
  imgEl.src = `img${pageNum}.jpg`;
  textEl.textContent = `第${pageNum}页内容`;
}

// 上一页按钮逻辑
document.getElementById('prevBtn').addEventListener('click', () => {
  if (pgNum > 1) {
    pgNum--;
    updatePageContent(pgNum);
  }
});

// 下一页按钮逻辑
document.getElementById('nextBtn').addEventListener('click', () => {
  if (pgNum < 5) {
    pgNum++;
    updatePageContent(pgNum);
  }
});

这样不管是切换上一页还是下一页，只需调用updatePageContent函数即可。后续如果需要修改图片路径规则、文本格式，只需要调整这一个函数，代码更简洁易维护。

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