用户在哪里点击进度条？答案

【问题标题】：Where does user click on progress bar?用户在哪里点击进度条？
【发布时间】：2020-10-25 10:49:32
【问题描述】：

我有一个音频播放器和一个进度条。我让用户点击进度条。当他们单击该栏时，它会推进音频播放器。用户单击进度条的位置是音频播放器应该开始的位置。这是我的代码。因此，如果用户点击进度条中 80% 的位置，音频播放器应该距离歌曲播放完毕还有 20%。

  var aud = $('audio')[0];
  $('.progress-bar-wrapper').on('click', (e) => {
     var posX = e.pageX - $(this).offset().left;
     var percentage = parseInt((posX / $(this).width()) * 100);
     aud.currentTime = percentage/100 * aud.duration;
     $('.progress:eq(' + index + ')').css('width', percentage + '%');
  });

很遗憾，这并不准确。当我单击进度条中的 80% 位置时，它不会将音频播放器移动到 80% 的持续时间。我该怎么办？

【问题讨论】：

获取窗口宽度和进度条宽度。归一化，你就会得到准确的值。
这与我目前正在做的@MarkusZeller 有什么不同？
没有标准化。如果将窗口宽度设为 100%，则可以将 x 位置准确映射到进度条。

标签： javascript jquery

【解决方案1】：

我只是运行了你的代码，没有做太多的改变，做了几个星期，但你的数学似乎在我的演示中运行良好。

我将您的百分比更改为 parseFloat 而不是 parseInt，这样会更准确。

在下面的代码中查看 cmets 并摆弄...

https://jsfiddle.net/joshmoto/v20ndcue/

// window on load
$(window).on('load', function(e) {

  // once audio loaded get the audio object
  let aud = $('audio')[0];

  // on prorgess bar wrapper click
  $(document).on('click', '.progress-bar', function(e) {
  
    // get x position in progress bar
    let posX = e.pageX - $(this).offset().left;
    let progressWidth = $(this).outerWidth();
    
    // create percentage from position etc
    let percentage = parseFloat((posX / progressWidth) * 100);
    
    // set the audio current time to progress position
    aud.currentTime = percentage / 100 * aud.duration;
    
    // update the progress bar width
    $('.progress',this).css('width', percentage + '%');

  });

});

HTML {
  height: 100%;
  min-height: 100%;
}

BODY {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
  height: 100%;
}

AUDIO {
  width: 100%;
  padding: 0;
  margin: 0 0 15px 0;
}

.progress-bar {
  position: relative;
  height: 15px;
  overflow: hidden;
  border-radius: .5rem;
  background: #fff;
}

.progress-bar .progress {
  display: block;
  height: 100%;
  width: 0;
  background: #2e71ff;
}

<audio controls>
  <source src="https://dev.joshmoto.wtf/mp3/crane-flock-aproaching.mp3" type="audio/mpeg">
</audio>

<div class="progress-bar">
  <div class="progress"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://jsfiddle.net/joshmoto/0qydrf3t/

添加了几个 tweeks，但有点粗糙，用于处理多个音频剪辑，并具有处理/返回音频项目数据的功能（全局）...

https://jsfiddle.net/joshmoto/0qydrf3t/

【讨论】：