css - Progress 使用 HTML5 Progress 寻找音频位置

Question

我正在创建某种音频播放器，但遇到了障碍。我添加了一个进度条，它会根据正在播放的歌曲进行更新。

但是，我希望进度条可以点击并在点击时跳转到轨道的时间(就像每个普通玩家一样)。

<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>  

我在 CodePen 中创建了一个模拟播放器，网址如下:View in CodePen

Answer 1

我最终使用了 jQuery UI slider 并随着轨道位置的变化动态更新它。