如何使用SoundJS获取音频持续播放进度以实现图形动画？

我之前也碰到过这个困扰！SoundJS确实没有提供原生的播放进度事件，但我们可以通过定期轮询当前播放位置的方式来实现进度跟踪，完全能满足图形动画的需求。下面是具体的实现思路和代码示例：

核心思路 #

SoundJS的音频实例自带两个关键属性，刚好能帮我们计算播放进度：

• position：当前播放到的毫秒数
• duration：音频的总时长（单位也是毫秒）

我们只需要用定时器定期获取这两个值，算出0~1之间的进度比例，再把这个比例映射到你的图形动画逻辑里就行。同时要记得在音频暂停、结束时停止定时器，避免不必要的性能消耗。

完整代码示例 #

let soundInstance;
let progressTimer;

// 音频加载完成后的处理函数
function handleSoundLoad(event) {
  soundInstance = event.src;
  
  // 播放音频（也可以绑定到用户点击等交互事件上）
  soundInstance.play();
  
  // 启动进度跟踪定时器，100ms的间隔兼顾流畅度和性能
  progressTimer = setInterval(updateAnimationProgress, 100);
  
  // 监听音频状态变化，及时清理定时器
  soundInstance.on("complete", stopProgressTracking);
  soundInstance.on("pause", stopProgressTracking);
  soundInstance.on("resume", () => {
    // 恢复播放时重新启动定时器
    progressTimer = setInterval(updateAnimationProgress, 100);
  });
}

// 更新动画进度的核心函数
function updateAnimationProgress() {
  // 防止音频未就绪或暂停时的无效计算
  if (!soundInstance || soundInstance.paused) return;
  
  const totalDuration = soundInstance.duration;
  const currentPlayTime = soundInstance.position;
  
  // 计算0到1之间的进度比例
  const playProgress = currentPlayTime / totalDuration;
  
  // --------------------------
  // 这里替换成你的图形动画逻辑
  // 示例1：更新进度条宽度
  document.getElementById("progress-bar").style.width = `${playProgress * 100}%`;
  // 示例2：旋转一个SVG图形
  document.getElementById("animation-circle").style.transform = `rotate(${playProgress * 360}deg)`;
  // --------------------------
}

// 停止进度跟踪的函数
function stopProgressTracking() {
  clearInterval(progressTimer);
}

// 初始化音频加载
createjs.Sound.registerSound("your-audio-file.mp3", "customAudioID");
createjs.Sound.on("fileload", handleSoundLoad);

实用注意事项 #

• 定时器间隔：建议设置在50~200ms之间，太小会增加性能负担，太大则动画不够流畅，可根据你的动画精度需求调整。
• 流媒体音频处理：如果是在线流媒体音频，duration一开始可能是NaN，需要等待音频加载到足够数据后再启动定时器，可以监听音频实例的progress事件来判断。
• 错误处理：可以添加对totalDuration为0或NaN的判断，避免出现计算错误导致的动画异常。

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