javascript - 音频播放器 - 一次仅播放一首轨道，不起作用

Question

我有一个带有多个轨道的简单音频播放器。用户可以选择一首他们喜欢引用的轨道。玩家基本都在工作。但是，我只想一次只播放一首轨道，这是行不通的。

这是我所做的

HTML 音频播放器

<div class="audioplayer">
  <div class="md-col-4">
    <input type="radio" name="track" class="track1" id="track1" value="1" checked="checked">
    <label for="track1" class="track1 selected">
        <div class="audiotrack">
            <div class="info">
               <h5>In this world</h5>
               <p>Gramatik</p>
            </div>
            <audio src="/media/gramatik.mp3" class="audio-player" preload="auto"></audio>

            <div class="playpause" data-state="play"></div>
            <div class="progressbar"></div>
        </div>
     </label>
   </div>

  <div class="md-col-4">
    <input type="radio" name="track" class="track2" id="track1" value="2" checked="checked">
    <label for="track2" class="track2">
        <div class="audiotrack">
            <div class="info">
               <h5>Stars</h5>
               <p>Tom Hank</p>
            </div>
            <audio src="/media/looseyourself.mp3" class="audio-player" preload="auto"></audio>

            <div class="playpause" data-state="play"></div>
            <div class="progressbar"></div>
        </div>
     </label>
   </div>
</div>

JS

$('.audioplayer label').on('click', function(e){
    e.preventDefault();
    var labelid = $(this).attr('for').toString();
    $('.selected').removeClass('selected');
    $('input:radio[id='+labelid+']').prop('checked', true);
    console.log($('input:radio[id='+labelid+']').prop('checked', true));
    $(this).addClass('selected');

    var btn = $(this).find(".playpause");
    var audio = btn.siblings('audio');

    var progress= btn.siblings(".progressbar");
    if(!btn.hasClass("playing")){
      btn.addClass("playing");
      audio.get(0).play();
        var playertime = setInterval(function(){
        var c = audio.get(0).currentTime;
        var d = audio.get(0).duration;
        progress.css("width", (c/d)*100 +'px' );
      }, 300);
    }
    else{
      btn.removeClass("playing");
      audio.get(0).pause();
      clearInterval(playertime);
    }
});

我在这里缺少什么？ 谢谢

Answer 1

你可以做这样的事情

var audio = btn.siblings('audio');
//I wouldn't recommend but this is a way to do it.
$('audio').each(function(){
    console.log('audio');
    this.pause();
});    
var progress= btn.siblings(".progressbar");