Аудиоплеер - Воспроизведение только одного трека за раз, не работает

Question

У меня есть простой аудиоплеер с несколькими дорожками. Пользователь может выбрать только один трек, который они хотели бы назвать. Игрок в основном работает. Но я хочу, чтобы за один раз играл только один трек, который не работает.

Вот что я сделал

HTML AUDIO PLAYER

<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");