Audio playlist JavaScript

Code ទាំងបានយកចេញពី youtube ក្នុងគោលបំណងសិក្សា​ ដែលមាន HTML, CSS, Javascript and Jquery.

---

• ខ្ញុំមិនត្រូវការបងទេ
• រាត្រីមាត់ស្ទឹងសង្កែ (ស៊ីន ស៊ីសាមុត)
• ដៃក្នុងដៃភ្នែកក្នុងភ្នែក
• បងអើយវិលវិញ (រស់ សេរីសុទ្ធា)

---

Simple Code

css

 <style type="text/css">
  
  #playList{
   list-style: none;
  }
  #playList li a{
   color: black;
   font-size: 16px;
  }
  #playList .current-Song a{
   color: blue;
   font-size: 20px;
   
  }
 </style>

HTML

 <audio controls id="audioPlayer"></audio>
 <ul id="playList">
  <li class="current-Song"><a href="https://drive.google.com/uc?id=11Fs2Tn3g4fke2yn-CQ5oNHln5IUCrDhV" >ខ្ញុំមិនត្រូវការបងទេ</a></li>
  <li><a href="https://drive.google.com/uc?id=1z5U7L4GXOYJEZJteA03R-yCKJRZ5ZTRq">រាត្រីមាត់ស្ទឹងសង្កែ (ស៊ីន ស៊ីសាមុត)</a></li>
  <li><a href="https://drive.google.com/uc?id=0B0MRwi02uUxuSVFHNmVXbEhtVzg">ដៃក្នុងដៃភ្នែកក្នុងភ្នែក</a></li>
  <li><a href="https://drive.google.com/uc?id=1RGOHxghnAD6QDo_tDvkVqluaomSuOGOL">បងអើយវិលវិញ (រស់ សេរីសុទ្ធា)</a></li>
 </ul>

JavaScript with jquery

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script> 
 <script type="text/javascript">
  audioPlayer();
  function audioPlayer(){
   var currentSong = 0;
   $("#audioPlayer")[0].src = $("#playList li a")[0];
   // $("#audioPlayer")[0].play();
   $("#playList li a").click(function(e){
    e.preventDefault();
    $("#audioPlayer")[0].src = this;
    $("#audioPlayer")[0].play();

    $("#playList li").removeClass("current-Song");
    currentSong = $(this).parent().index();
    $(this).parent().addClass("current-Song");
   });

   $("#audioPlayer")[0].addEventListener("ended", function(){
    currentSong ++;
    if(currentSong ==$("#playList li a").length){
     currentSong = 0;
     $("#playList li").removeClass("current-Song");
        $("#playList li:eq("+currentSong+")").addClass("current-Song");
        $("#audioPlayer")[0].src = $("#playList li a")[currentSong].href;
    }else{
    $("#playList li").removeClass("current-Song");
    $("#playList li:eq("+currentSong+")").addClass("current-Song");
    $("#audioPlayer")[0].src = $("#playList li a")[currentSong].href;
    $("#audioPlayer")[0].play();
    }
   });
  }
 </script>