Question

我正在尝试创建一个搜索栏，其中有一个按钮，可以显示正在播放的曲目部分。我想让它可拖动，因此用户可以点击它并向前或向后移动它以访问音频对象的其他部分。

这是我的男女同校：JSFIDDLE

var audio = new Audio();
audio.src = "https://rjmediamusic.com/media/mp3/mp3-256/Masih-Arash-AP-Bia-Bazam.mp3";


$(audio).on("timeupdate", function() {
  $(".due").text(this.currentTime);
  $(".cirl").css("margin-left", audio.currentTime * (100 / audio.duration) + "%"); // UPDATEs SEEKBAR
});

$(".play").on("click tap", function() {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
})


$(".seekbar").on('click tap', function(e) {
  x = e.pageX - $(this).offset().left,
    width = $(this).width(),
    duration = audio.duration;
  audio.currentTime = (x / width) * duration;
});

.seekbar {
  width: 300px;
  height: 5px;
  border-bottom: 2px solid #000;
  margin-top: 23px;
}

.seekbar > .cirl {
  width: 1px;
  height: 11px;
  border-right: 2px solid #000;
  margin-top: 1px;
  margin-left: 0px;
  cursor:e-resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seekbar">
  <div class="cirl"></div>
</div>
<br>
<div class="due">0</div>
<br>
<button class="play">Play / Pause</button>

知道如何拖动.cirl来改变audio.currentTime位置吗？

提前致谢。

可拖动的HTML5音频搜索栏

0 个答案: