使用Pixi Sound实现页面导航音频续播及添加控制面板求助

1. 页面导航后音频续播修复 #

你的代码存在几个关键问题导致续播失效：

• 重复创建播放实例，导致初始播放未使用保存的进度
• 保存的进度格式错误（将0-1的比例转为百分比后存储，不符合start参数要求）
• 频繁写入localStorage影响性能且可能导致数据不准确

修复后代码 #

let soundInstance = null;
let sound = null;

PIXI.sound.Sound.from({
  url: 'https://cdn.shopify.com/s/files/1/0562/5846/1760/files/Rimzee_-_Intro_Official_Audio.mp3?v=1676663051',
  volume: 0.1,
  preload: true,
  loaded: function(err, loadedSound) {
    if (err) {
      console.error('音频加载失败:', err);
      return;
    }
    sound = loadedSound;
    
    // 读取本地保存的进度，默认从0开始
    const savedProgress = localStorage.getItem("audio-progress");
    const startProgress = savedProgress ? parseFloat(savedProgress) : 0;
    
    // 仅创建一个播放实例，从保存的进度开始播放
    soundInstance = sound.play({
      volume: 0.1,
      start: startProgress, // 使用0-1的比例值，与Pixi Sound的参数要求匹配
      end: 106
    });
    
    // 页面卸载时保存当前进度
    window.addEventListener('beforeunload', () => {
      if (soundInstance && soundInstance.isPlaying) {
        localStorage.setItem("audio-progress", soundInstance.progress);
      }
    });
  }
});

关键修复点 #

• 全局维护一个播放实例soundInstance，避免重复创建导致的逻辑混乱
• 直接保存和读取progress（0-1的比例值），符合start参数的格式要求
• 在页面即将卸载时保存进度，减少localStorage的写入频率，保证数据准确性

2. 音频控制面板实现 #

基于你提供的按钮，添加播放/暂停控制逻辑，同时可扩展进度条功能：

完整HTML（含进度条） #

<button class="btn1 btn-lg off" id="paused">
  <span class="glyphicon glyphicon-pause off"></span>
  <span class="glyphicon glyphicon-play on"></span>
</button>

<!-- 新增进度条 -->
<div style="margin-top:10px;">
  <input type="range" id="audio-progress-bar" min="0" max="100" value="0" style="width:300px;">
</div>

完整脚本（含控制逻辑） #

let soundInstance = null;
let sound = null;

PIXI.sound.Sound.from({
  url: 'https://cdn.shopify.com/s/files/1/0562/5846/1760/files/Rimzee_-_Intro_Official_Audio.mp3?v=1676663051',
  volume: 0.1,
  preload: true,
  loaded: function(err, loadedSound) {
    if (err) {
      console.error('音频加载失败:', err);
      return;
    }
    sound = loadedSound;
    
    // 读取本地保存的进度
    const savedProgress = localStorage.getItem("audio-progress");
    const startProgress = savedProgress ? parseFloat(savedProgress) : 0;
    
    // 创建播放实例
    soundInstance = sound.play({
      volume: 0.1,
      start: startProgress,
      end: 106
    });
    
    // 页面卸载保存进度
    window.addEventListener('beforeunload', saveCurrentProgress);
    
    // 绑定播放/暂停按钮事件
    const controlBtn = document.getElementById('paused');
    controlBtn.addEventListener('click', togglePlayPause);
    
    // 初始化按钮状态
    updateButtonState();
    
    // 进度条相关逻辑
    const progressBar = document.getElementById('audio-progress-bar');
    // 实时更新进度条
    soundInstance.on('progress', (progress) => {
      progressBar.value = progress * 100;
    });
    // 点击进度条跳转播放位置
    progressBar.addEventListener('input', (e) => {
      const newProgress = parseFloat(e.target.value) / 100;
      soundInstance.seek(newProgress);
      saveCurrentProgress();
    });
  }
});

// 切换播放/暂停状态
function togglePlayPause() {
  if (!soundInstance) return;
  
  if (soundInstance.isPlaying) {
    soundInstance.pause();
    saveCurrentProgress();
  } else {
    soundInstance.play();
  }
  updateButtonState();
}

// 更新按钮图标显示
function updateButtonState() {
  const controlBtn = document.getElementById('paused');
  const pauseIcon = controlBtn.querySelector('.glyphicon-pause');
  const playIcon = controlBtn.querySelector('.glyphicon-play');
  
  if (soundInstance && soundInstance.isPlaying) {
    pauseIcon.classList.remove('off');
    pauseIcon.classList.add('on');
    playIcon.classList.remove('on');
    playIcon.classList.add('off');
  } else {
    pauseIcon.classList.remove('on');
    pauseIcon.classList.add('off');
    playIcon.classList.remove('off');
    playIcon.classList.add('on');
  }
}

// 保存当前播放进度到localStorage
function saveCurrentProgress() {
  if (soundInstance) {
    localStorage.setItem("audio-progress", soundInstance.progress);
  }
}

功能说明 #

• 点击按钮可切换音频的播放/暂停状态，同步更新图标显示
• 进度条实时显示播放进度，点击进度条可跳转到指定位置
• 暂停或页面导航时自动保存当前播放位置，下次打开可续播

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