我正在创建某种音频播放器,但遇到了障碍。我添加了一个进度条,它会根据正在播放的歌曲进行更新。
但是,我希望进度条可以点击并在点击时跳转到轨道的时间(就像每个普通玩家一样)。
<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">♥ 13</span></li>
<li><span class="played">► 123</span></li>
<li><a href="" class="commented" title="Comments"><span>♥ 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
最佳答案
我最终使用了 jQuery UI slider 并随着轨道位置的变化动态更新它。
关于css - Progress 使用 HTML5 Progress 寻找音频位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29939183/