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

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