Css 使用HTML5 Progress查找音频位置的进度

我正在制作一个音频播放器，我遇到了一堵砖墙。我添加了一个进度条，可以根据播放的歌曲进行更新

但是，我希望进度条是可点击的，并在点击时跳转到轨迹的时间（就像每个普通玩家一样）

几秒钟前






&心；十三,
►；123




我最终使用了一个滑块，并随着轨迹位置的变化而动态更新它。
它将帮助您。试着评估一下你想要什么


HTML

返回
续

JAVASCRIPT
//进度条
$（“#进度”）.progressbar({
数值：0
});
//单击“继续”按钮时更新进度条
var currValue=0，
toValue=0；
$（“#cont”）.button（）。单击（函数（）{
currValue=$（“#进度”）.progressbar（“值”）；
如果（电流值+25=0）{
toValue=currValue-25；
animateProgress（）；
}
});
函数animateProgress（）{
如果（currValuetoValue）{
$（“#进度”）.progressbar（“值”，currValue-1）；
currValue=$（“#进度”）.progressbar（“值”）；
setTimeout（animateProgress，4）；
}
}

<div class="music-stream-wrapper">

<ul class="music-stream">

<li>

  <div class="player-wrapper">

    <div class="album-art">
      <a href="#" title=""><img src="https://i1.sndcdn.com/artworks-000108593302-0ek7n6-t120x120.jpg" alt="" /></a>
    </div>

    <div class="meta-controls">
      <div class="play-controls">
        <!-- Content -->
        <div class="track">
          <h4 class="title"><a href="" title="">Tail toddle - Unknown</a></h4>
          <span class="author"><a href="" title="">john.doe</a></span>
          <span class="uploaded">a few seconds ago</span>
        </div>
        <div class="spectrum">
          <div class="play-pause-button">
            <a href="#" class="play"></a>
            <a href="#" class="pause inactive"></a>
          </div>
          <div class="spectrum-wrapper">
            <div id="spectrum_11"></div>
            <div class="progress">
              <progress value="0" max="1"></progress>
            </div>
          </div>
        </div>
      </div>
      <div class="intent">
        <ul class="buttons">
          <li><a href="#" class="like" title="Like">Like</a></li>
          <li><a href="#" class="download" title="Download">Download</a></li>
          <li><a href="#" class="share" title="Share">Share</a></li>
        </ul>
        <ul class="meta">
          <li><span class="liked">&hearts; 13</span></li>
          <li><span class="played">&#9658; 123</span></li>
          <li><a href="" class="commented" title="Comments"><span>&hearts; 3</span></a></li>              
        </ul>
      </div>
    </div>

  </div>

</li>

</ul>

</div>

<audio src="http://tonycuffe.com/mp3/tailtoddle_lo.mp3" id="mockSong"></audio>  

 <div id="progress"></div>
 <div id="back">back</div>
 <div id="cont">cont</div>

  //PROGRESS BAR
 $("#progress").progressbar({
       value: 0
    });
 //UPDATING PROGRESS BAR WHEN CONTINUE BUTTON CLICKED
    var currValue = 0,
    toValue = 0;
   $("#cont").button().click(function () {
  currValue = $("#progress").progressbar("value");
    if (currValue + 25 <= 100) {
    toValue = currValue + 25;
    animateProgress();
    }
});
 //DECREASING PROGRESS BAR WHEN GO BACK BUTTON CLICKED
$("#back").button().click(function () {
  currValue = $("#progress").progressbar("value");
  if (currValue - 25 >= 0) {
      toValue = currValue - 25;
      animateProgress();
   }
 });

function animateProgress() {
if (currValue < toValue) {
    $("#progress").progressbar("value", currValue + 1);
    currValue = $("#progress").progressbar("value");
    setTimeout(animateProgress, 4);
} else if (currValue > toValue) {
    $("#progress").progressbar("value", currValue - 1);
    currValue = $("#progress").progressbar("value");
    setTimeout(animateProgress, 4);
 }
}