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

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

使用.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);
}

如何定位此特定进度标记？

1 个答案:

DEMO