如何定位这个特定的进度标签？

Question

我试图在我的网页上创建一个音频预览页面，其中每个音频元素都有自己的进度条。但是，我遇到了麻烦，让每个音频元素仅针对其进度条。我对此很陌生，所以我希望这不是一个直截了当的愚蠢问题，但我非常感谢您的帮助，提前致谢。

这是每首歌曲预览的 html。

<audio id="player"></audio>

<div class="songPreview">
  <div class="disp">
    <div class="button" data-src="EXAMPLE.wav" data-pos="0">
      <a href="#" class="soundPlay"><img src="Buttons/play.png"></a>
      <a href="#" class="soundStop hidden"><img src="Buttons/stop.png"></a>
    </div>
    <div class="songInfo">
      <p>SONG NAME HERE</p>
    </div>
  </div>

  <progress class="seekbar" value="0" max="1" style="width:250px"></progress>
</div>

<div class="songPreview2">
  <div class="disp">
    <div class="button" data-src="EXAMPLE2.wav" data-pos="0">
      <a href="#" class="soundPlay"><img src="Buttons/play.png"></a>
      <a href="#" class="soundStop hidden"><img src="Buttons/stop.png"></a>
    </div>
    <div class="songInfo">
      <p>SONG NAME HERE</p>
    </div>
  </div>

  <progress class="seekbar" value="0" max="1" style="width:250px"></progress>
</div>

这就是 JS

$(document).ready(function() {
    var myAudio = document.getElementById("player");
//play stop button etc.
    $(document).on('click', '.soundPlay', function(e) {
        var target = this;
        $(this).hide();
        $(this).next("a").show();
        myAudio.src = target.parentNode.getAttribute('data-src');
        myAudio.play();
        e.preventDefault();
    });


    $(document).on('click', '.soundStop', function(e) {
        var target = this;
        $(this).hide();
        $(this).prev("a").show();
        $('audio').each(function(){
            this.pause();
            this.currentTime = 0;
        });
        e.preventDefault();
    });
    //end of play stop button

    //seekbar
    $('#player').on('timeupdate', function() {
        $('.seekbar').attr("value", this.currentTime / this.duration);
    });
    //end seek bar

    //auto switch button on stop
    var audio = document.getElementById('player');
    audio.addEventListener('ended', stopAudio);

    function stopAudio() {
        audio.stop;
        $('.soundPlay').show('slow');
        $('.soundStop').hide('fast');
        $('.seekbar').attr(this.currentTime = 0);
    }
});

我似乎无法弄清楚如何仅针对每个相应 div 中的进度标签。 无论如何，我可以在没有一百万个不同的进度 ID 和过度重复的 JS 代码的情况下做到这一点吗？ （因为一个页面上会有 100 首这样的歌曲预览）

提前致谢！

Answer 1

您必须使用data-src 跟踪当前正在播放的声音div。

使用.val() 而不是attr('value')

试试这个，

$('#player').on('timeupdate', function() {
    $('div[data-src="'+this.src+'"]').parents('.disp').siblings('.seekbar').val(this.currentTime / this.duration);
});

还有，

把stopAudio()改成这个

function stopAudio() {
    audio.pause();
    audio.currentTime = 0;
    $('.soundPlay').show('slow');
    $('.soundStop').hide('fast');
    $('.seekbar').val(0);
}

DEMO