jQuery第二次使用動態音頻播放列表

Question

我希望能夠從類似於混響，soudcloud的動態創建的文件夾（源）中播放上傳的歌曲。這是一個軌道應用程序與下面生成的html源代碼。

原創教程由布拉德Traversy：https://www.youtube.com/watch?v=WTwwX__o01M

問題是隻有第一個嵌套plays.The休息中的最新上傳的歌曲不是在玩。我認爲jQuery不適用於隨後的歌曲，因爲按鈕處於非活動狀態。 對此有任何幫助嗎？編輯小提琴：http://jsfiddle.net/91fgth2f/8/

var audio; 

//Hide Pause Initially 

$('#pause').hide(); 
$('#playlist').hide(); 



//Initializer - Play First Song 
initAudio($('#playlist li:first-child')); 

function initAudio(element) { 
    var song = element.attr('song'); 
    var title = element.text(); 
    var cover = element.attr('cover'); 
    var artist = element.attr('artist'); 

    //Create a New Audio Object 
    audio = new Audio('media/' + song); 

    if (!audio.currentTime) { 
    $('#duration').html('0.00'); 
    } 

    $('#audio-player .title').text(title); 
    $('#audio-player .artist').text(artist); 

    //Insert Cover Image 
    $('img.cover').attr('src', 'images/covers/' + cover); 

    $('#playlist li').removeClass('active'); 
    element.addClass('active'); 
} 


//Play Button 
$('#play').click(function() { 
    audio.play(); 
    $('#play').hide(); 
    $('#pause').show(); 
    $('#duration').fadeIn(400); 
    showDuration(); 
}); 

//Pause Button 
$('#pause').click(function() { 
    audio.pause(); 
    $('#pause').hide(); 
    $('#play').show(); 
}); 

//Stop Button 
$('#stop').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    $('#pause').hide(); 
    $('#play').show(); 
    $('#duration').fadeOut(400); 
}); 

//Next Button 
$('#next').click(function() { 
    audio.pause(); 
    var next = $('#playlist li.active').next(); 
    if (next.length == 0) { 
    next = $('#playlist li:first-child'); 
    } 
    initAudio(next); 
    audio.play(); 
    showDuration(); 
}); 
} 

* { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
} 
body { 
    font-family: arial; 
    font-size: 13px; 
    line-height: 1.5em; 
    color: #000000; 
    background: url(../images/bg.png); 
} 
.clearfix { 
    clear: both; 
} 
.hidden { 
    display: none; 
} 
#container { 
    width: 700px; 
    height: 100px; 
    background: #eee; 
    overflow: auto; 
    margin: 0px auto; 
} 
#audio-image { 
    position: relative; 
    overflow: hidden; 
    height: 4px; 
    margin-bottom: 1px; 
} 
#audio-info { 
    text-align: center; 
} 
#audio-info .artist { 
    font-weight: bold; 
} 
.cover { 
    width: 100%; 
    z-index: 1; 
} 
input#volume { 
    width: 95%; 
    margin-left: 2%; 
    -webkit-appearance: none !important; 
    background: #ccc; 
    height: 1px; 
    margin-bottom: -15px; 
} 
input#volume::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    background: url(../images/knob.png) no-repeat; 
    height: 12px; 
    width: 12px; 
} 
#buttons { 
    width: 95%; 
    display: block; 
    margin-top: -15px; 
    margin-left: 23px; 
    overflow: auto; 
} 
button#play { 
    width: 24px; 
    height: 22px; 
    background: url(../images/play.png) no-repeat; 
    float: left; 
    margin-top: 15px; 
} 
button#pause { 
    width: 24px; 
    height: 22px; 
    background: url(../images/pause.png) no-repeat; 
    float: left; 
    margin-top: 15px; 
} 
button#stop { 
    width: 24px; 
    height: 22px; 
    background: url(../images/stop.png) no-repeat; 
    float: left; 
    margin-top: 15px; 
} 
button#prev { 
    width: 24px; 
    height: 22px; 
    background: url(../images/prev.png) no-repeat; 
    float: left; 
    margin-top: 15px; 
} 
button#next { 
    width: 24px; 
    height: 22px; 
    background: url(../images/next.png) no-repeat; 
    float: auto; 
    margin-top: 15px; 
} 
#playlist { 
    list-style-type: none; 
    padding: 2px; 
} 
#playlist li { 
    cursor: pointer; 
    margin: 5px; 
} 
#tracker { 
    position: relative; 
    width: 100%; 
} 
#playlist li.active { 
    font-weight: bold; 
    padding: 3px; 
    background: #666; 
} 
#progressBar { 
    width: 80%; 
    margin-left: 2%; 
    margin-bottom: 40px; 
    margin-top: -10px; 
    height: 5px; 
    background: url(../images/progress_bg.png) no-repeat; 
    float: right; 
} 
#progress { 
    background: url(../images/progress.png) no-repeat; 
    height: 5px; 
    display: inline-block; 
} 
#duration { 
    font-family: arial; 
    font-size: 13px; 
    line-height: 1.5em; 
    color: #fff; 
    position: absolute; 
    margin-top: -25px; 
    right: 10px; 
    padding: 4px 8px; 
    background: #000; 
    border-radius: 5px; 
} 

<html> 

    <table width="50%" border="0" cellspacing="0" cellpadding="0"> 

    <!---It plays for the songs within the first nested: <ul> </ul>--> 

    <tr> 

     <td align="left"> 

     <div class="buttons"> 

      <span>  
     <button id="play"></button> 
    <button id="pause"></button> 
     <button id="next"></button> 
    </span> 


      <ul id="playlist" class="hidden"> 

      <li song="song1.mp3" cover="cover1.jpg" artist="Artist1">Title.mp3</li> 

      <!--- next song (song2.mp3) plays if added within this first nested: <ul> </ul> --> 
      <li song="song2.mp3" cover="cover1.jpg" artist="Artist2">Title2.mp3</li> 

      </ul> 

     </div> 

     </td> 

    </tr> 

Answer 1

上調用 initAudio($('#playlist li:first-child'));

在上面的代碼中u的傳球第一的li元素試圖改變像initAudio($('#playlist li'));代碼問題。

希望這會起作用