如何在wavesurfer.js中获取波形栏点击位置的对应时间？

你遇到的问题是因为wavesurfer.getCurrentTime()返回的是当前媒体的播放进度，而非点击位置对应的时间——点击波形时，默认的位置跳转逻辑还未执行，所以拿到的是跳转前的旧值。

有两种可靠的解决方式：

方法一：监听WaveSurfer实例的click事件 #

WaveSurfer本身提供的click事件会直接返回点击位置的进度比例（0到1之间），结合总时长就能算出对应时间：

wavesurfer.on("click", (event, progress) => {
  const clickTime = progress * wavesurfer.getDuration();
  console.log(clickTime);
});

这里的progress参数是点击位置占整个波形宽度的比例，乘以媒体总时长（getDuration()）就是点击点对应的时间。

方法二：通过坐标手动计算（若需保留drawer事件） #

如果必须使用drawer的点击事件，可以通过点击坐标计算位置对应的时间：

wavesurfer.drawer.on("click", (event) => {
  // 获取波形容器的位置和尺寸
  const wrapperRect = wavesurfer.drawer.wrapper.getBoundingClientRect();
  // 计算点击位置相对于容器的X坐标
  const relativeX = event.clientX - wrapperRect.left;
  // 计算进度比例
  const progress = relativeX / wrapperRect.width;
  // 换算成时间
  const clickTime = progress * wavesurfer.getDuration();
  console.log(clickTime);
});

这两种方式都能直接拿到点击位置对应的时间，无需依赖播放进度的更新。

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