如何使我的音頻搜索欄可點擊並跳轉到我點擊的位置？

Question

我有一個自定義音頻搜索欄，我想讓它可點擊並使音頻跳轉到該部分。 這是我的音頻搜索欄的 HTML 代碼

<audio src="" preload="auto"  controls id="audioPlayer" ontimeupdate="updateTrackTime(this);" style="width: 0px; visibility: hidden ;"></audio>
<div class="p-bar">
   <div class="progress1"  id="progress1"></div>
</div>

這是我的 CSS 代碼：

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

這是我的搜索欄的 JavaScript 代碼：

var track = document.getElementById('audioPlayer');

var controlBtn = document.getElementById('play-pause');


var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
audio.addEventListener("playing", function(_event) {
  var duration = _event.target.duration;
  advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
  clearTimeout(timer);
});


var advance = function(duration, element) {
  var progress = document.getElementById("progress1");
  increment = 10/duration
  percent = Math.min(increment * element.currentTime * 10, 100);
  progress.style.width = percent+'%'
  startTimer(duration, element);
}
var startTimer = function(duration, element){ 
  if(percent < 100) {
    timer = setTimeout(function (){advance(duration, element)}, 100);
  }
}

Answer 1

您可以使用“單擊”事件處理程序使任何 HTML 元素可單擊。 一旦您進入 click 事件處理程序，傳遞給處理程序的MouseEvent將有大約五種不同的方式來獲取鼠標單擊的 x 位置，因此您可以確定用戶單擊的欄的左側有多遠。 您可能需要嘗試其中的一些以查看哪種適合您，但我建議從 offsetX 開始。 從那里您應該能夠根據用戶單擊的進度項目的百分比計算跳過媒體的百分比。