Аудио плейър - Възпроизвежда само по една песен, не работи

Имам прост аудиоплейър с множество песни. Потребителят може да избере само една песен, която иска да препоръча. Плейърът по принцип работи. Но искам само една песен да се възпроизвежда наведнъж, което не работи.

Ето какво направих

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

Какво ми липсва тук? Благодаря


javascript html audio-player
person MysticCodes    schedule 30.09.2014    source източник
comment
Искате ли да деактивирате възможността за възпроизвеждане на други песни или искате да спрете/поставите на пауза текущото аудио и да пуснете друго?   -  person Neo    schedule 30.09.2014
comment
Ако щракна върху който и да е аудио запис, тогава искам предишният запис да спре, ако има такъв, и да се възпроизведе в момента, щракнете върху един.   -  person MysticCodes    schedule 30.09.2014

Отговори (1)


arrow_upward
2
arrow_downward

Можете да направите нещо подобно

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");
person Neo    schedule 30.09.2014