如何让自定义音频seek bar支持点击跳转至对应播放进度位置

修改步骤 #

1. 调整CSS样式 #

给进度条外层容器增加相对定位和点击光标提示，删除无效的flex: ;属性：

.p-bar{
    position: relative;
    width: 25%;
    height: 4px;
    background: #333333;
    cursor: pointer;
}
.progress1 {    
  height:3px;
  background: whitesmoke;
  transition: width .1s linear;
  left: 0;
  box-shadow: 1px 1px 2px  white;
}

2. 新增点击跳转JS逻辑 #

在原有JS代码末尾追加如下代码即可实现点击跳转功能：

const progressBar = document.querySelector('.p-bar');
progressBar.addEventListener('click', function(e) {
  // 音频未加载完成时直接返回，避免报错
  if (isNaN(audio.duration)) return;
  // 计算点击位置占进度条总宽度的比例
  const clickPercent = e.offsetX / this.offsetWidth;
  // 跳转音频到对应时间点
  audio.currentTime = audio.duration * clickPercent;
  // 如需点击后自动播放，取消注释下面两行即可
  // if (audio.paused) {
  //   audio.play();
  // }
});

实现说明 #

• 点击进度条时通过offsetX获取点击位置距离进度条左边缘的距离，除以进度条总宽度得到对应播放进度比例
• 用音频总时长乘以进度比例得到目标播放时间，直接赋值给音频元素的currentTime属性即可完成跳转
• 原有进度条同步逻辑无需修改，跳转后会自动触发进度条宽度更新

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