如何解决页面切换时<audio>音频轨道重启问题，保留播放进度？

嘿，这个问题我之前帮同事处理过类似的场景，你的思路完全找对方向了——用sessionStorage存储播放进度是最靠谱的前端方案，而且不管是Drupal还是其他CMS都能通用。下面给你拆解具体的实现步骤和适配细节：

1. 实时保存播放进度与状态 #

首先要给你的audio元素绑定进度更新事件，每次播放进度变化时，把当前时间和播放状态（是否暂停）存入sessionStorage。另外在页面卸载前也补存一次，避免进度没及时同步：

const audioPlayer = document.getElementById('audioplayer');

// 监听播放进度变化，实时保存
audioPlayer.addEventListener('timeupdate', () => {
  sessionStorage.setItem('audioCurrentTime', audioPlayer.currentTime);
  sessionStorage.setItem('audioPaused', audioPlayer.paused);
});

// 页面跳转前强制保存一次
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('audioCurrentTime', audioPlayer.currentTime);
  sessionStorage.setItem('audioPaused', audioPlayer.paused);
});

2. 页面加载时恢复进度 #

当用户跳转到新页面后，页面加载完成时从sessionStorage读取之前的进度和状态，然后恢复到audio元素上。这里要注意现代浏览器的自动播放限制——如果之前是播放状态，可能需要用户交互才能继续播放，所以我们先设置进度，再尝试恢复播放：

window.addEventListener('DOMContentLoaded', () => {
  const audioPlayer = document.getElementById('audioplayer');
  const savedTime = sessionStorage.getItem('audioCurrentTime');
  const savedPaused = sessionStorage.getItem('audioPaused');

  if (savedTime) {
    // 恢复保存的播放进度
    audioPlayer.currentTime = parseFloat(savedTime);
    
    // 如果之前处于播放状态，尝试恢复播放（处理浏览器限制）
    if (savedPaused === 'false') {
      audioPlayer.play().catch(err => {
        console.log('自动播放被浏览器阻止，请点击播放按钮:', err);
        // 这里可以添加一个播放按钮，引导用户手动触发播放
      });
    }
  }
});

3. Drupal专属适配细节 #

因为你的audio元素在页脚区块里，Drupal下可以这么处理代码的放置：

• 方式一：主题库加载：把上述JS代码放到主题的自定义JS文件中（比如js/audio-progress.js），然后在your_theme.libraries.yml里定义一个库，最后在页脚区块的配置中附加这个库，或者全局加载。
• 方式二：模板嵌入：如果是自定义页脚区块模板（比如block--footer.html.twig），可以直接把脚本放在audio元素的后面，确保脚本能找到对应的DOM元素。

另外，你原来的autoplay属性可以做个小优化：如果有保存的进度，就不需要从头自动播放了。因为PHP没法直接读取前端的sessionStorage，所以在JS里处理更稳妥：页面加载时如果检测到有保存的进度，就移除audio标签的autoplay属性，再恢复进度。

额外优化建议 #

• 给audio元素添加一个播放/暂停按钮，方便用户手动控制，同时在按钮点击时同步更新sessionStorage的状态。
• 如果需要关闭浏览器后仍保留进度，可以把sessionStorage换成localStorage，但要注意告知用户存储了播放数据（符合隐私规范）。

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