새 트랙을 클릭하면 jQuery Update 오디오 플레이어가 사용됩니다.

Question

40 개의 오디오 노래와 잘 설계된 오디오 플레이어의 정렬되지 않은 목록이있는 asp.net에서 한 페이지를 만들었습니다. 목록 항목 중 하나를 클릭하면 오디오 플레이어가 자체를 업데이트하고 트랙을 변경해야하는 jQuery 함수가 필요합니다.

<ul class="rounded-list"> 
    <li class="audioList">List item</li> 
    <li class="audioList">List item</li> 
    <li class="audioList">List item</li> 
    <li class="audioList">List item</li> 
    <li class="audioList">List item</li> 
    <li class="audioList">List item</li> 
</ul> 



<div id="audio-player-div" class="audio-width"> 
    <audio preload="auto" class="audio-player"> 
       <source src="Audio/BlueDucks_FourFlossFiveSix.mp3" /> 
       <source src="Audio/BlueDucks_FourFlossFiveSix.wab" /> 
       <source src="Audio/BlueDucks_FourFlossFiveSix.ogg" /> 
    </audio> 
</div> 

나는 트랙의 목록을 가지고 있고 그 자체와 함께 트랙의 확장자를 추가해야 내가 목록 항목 중 하나를 클릭하면 오디오 트랙을 업데이트해야합니다.

Answer 1

편집 : 업데이트 된 질문을 바탕으로

HTML :

<ul class="rounded-list"> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix1">1</li> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix2">2</li> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix3">3</li> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix4">4</li> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix5">5</li> 
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix6">6</li> 
</ul> 



<div id="audio-player-div" class="audio-width"> 
    <audio preload="auto" class="audio-player"></audio> 
</div> 

jQuery를 : 그것은

$('li').click(function() { 
    var trackName = $(this).data('track'); 
    $('.audio-player').empty(); 
    $('.audio-player').append('<source src="'+ trackName +'.mp3" />'); 
    $('.audio-player').append('<source src="'+ trackName +'.wab" />'); 
    $('.audio-player').append('<source src="'+ trackName +'.ogg" />'); 
});