On the front-end player on one song, the next song, playlist addition, deletion, modification, check and so on, today to give you a detailed explanation of the logic implementation.

1. Add to List
   Idea: Use arrays, add program names to arrays, by judging arrays to achieve, on the code
   

   var idList = [] , //Program Array First var an empty array
   playListIndex = 0; //The subscript of the current program in the playlist defines a variable to store the subscript
   
   function FnAddList(list_data){  //list_data is an object that stores program names, playback times, and so on.
       var _id = list_data.title,  //Program name
           _isAdd = true,    //Judgement condition
           _index = 0;    //subscript
       for(var i=0; i<idList.length; i++){   //Traversing values in arrays
           if(_id == idList[i]){   //Determine if there is this heading in the array
               _isAdd = false;
               _index = i;  //Subscription of the title in the array
           }
       }
       if(_isAdd){
         idList.unshift(list_data.title);
         var _playListHtml = '<li class="playList-list-item" data-title="'+list_data.title+'" data-type="'+list_data.type+'" data-date="'+list_data.date+'" data-time="'+list_data.time+'" data-auther="China Plus Radio" data-url="'+list_data.url+'"><div class="playList-list-showsName">'+list_data.title+'</div><div class="playList-list-autherName">'+list_data.autherName+'</div><div class="playList-list-time">'+list_data.time+'</div><div class="playList-list-btns"><span class="playList-list-btns-remove" data-title="'+list_data.title+'" title="delete"></span></div></li>';
         $('#playList-list ul').prepend(_playListHtml); // Add to the page
   
         
       }
       playListIndex = _index;  
       var _playListLength = $('#playList-list ul .playList-list-item').length-1;
       // Add active to the list program when calling FnAddList
       $('#PlayList-list ul.playList-list-item'). eq(_index). addClass ('active'). siblings (). removeClass ('active'); // Add styles to the current program in the playlist
   
     }
   

    

2. Last song, next song
   Idea: Judge the subscription playList Index of the current program is 0 by default, the last one is - 1 and the next one is + 1
   

   var _item , _itemLength;  //Program Nodes and Program Total Global Variables
     function changeMedia(i){
         _item = $('#playList-list ul .playList-list-item') , _itemLength = _item.length-1;
         playListIndex+=i;
         if(playListIndex<0){
             playListIndex = 0;
         }else if(playListIndex>_itemLength){
             playListIndex = _itemLength;
         }else{
             var _this = _item.eq(playListIndex);
             FnAudioPlay(_this,true);
         }
         $('.playList-list-live').removeClass('active');
     };
   

   　　

3. Display Hiding of Player's Right and Right Buttons
   
   Idea: It is also based on the current program subscript playListIndex and the total length of the program _itemLength to judge if the current program subscript 0 is the first song, the arrow hidden in the previous song, the arrow displayed in the next song.
   If the current program subscript equals the total number of program lists - 1, which is the last song, the next arrow is hidden, and the previous arrow is displayed.
   If the current program subscription does not satisfy the above two conditions, that is, in the middle of the list, the arrows of the previous and next songs are displayed.
   
   
4. Delete a program from the list
   Idea: Judge whether there is this program in the array, get the subscript and delete it.
   Emphasis: The indexOf method of the array returns a subscript with two parameters: the item to be searched and the position to start searching, usually 0.
   The splice method of an array deletes two parameters 1: to find the subscript of an item in the array, and 2: to delete several items from the position specified in parameter 1 is to delete one
   

   // Click Delete Programs
       $(document).on('click','.playList-list-btns-remove',function(){
         var _this = $(this),  //Current node
         _this_title = _this.attr('data-title'),  //Title of current program
         _arrIndex;  //To delete the subscript of the program
         isRemoveBtnsClick = true;  //Judgment is to delete events
         if(idList.indexOf(_this_title,0) != -1){
           _arrIndex = idList.indexOf(_this_title,0);
           idList.splice(_arrIndex,1);
           _this.parent().parent().remove();  //Delete clickable programs
           _item = $('#playList-list ul .playList-list-item');
           _itemLength = _item.length;  //Delete a program and re-record the length of the program in the list. Total number of programs in the list
           _nextItemIndex = _arrIndex;  
           if(_this.parent().parent().hasClass('active')){
             playListIndex = _arrIndex;  //The subscript of the item to be deleted is assigned to playListIndex, which is a global variable and will be used in the method of the previous song and the next song.
             if(_nextItemIndex<0){  //Judging that click program subscript is less than 0, default subscript is 0, play the first item
                 _nextItemIndex = 0;
             }else if(_nextItemIndex>_itemLength){  //Judging that clicking on the subscript of the program is greater than the total number of the program list is equal to the total number, playing the last item
                 _nextItemIndex = _itemLength - 1;
             }else{  //Judging that the subscript of click program is greater than 0 and less than the total length
                 if(_nextItemIndex <= _itemLength - 1){  //If the subscript of the click program is greater than 0 and less than or equal to the total length, play the next one.
                   var _this = _item.eq(_nextItemIndex);
                   FnAudioPlay(_this,true);
                 }else{  //If the last item in the list is deleted and the first item in the playlist is judged to be the last item, the first song is played.
                   FnAudioPlay(_item.eq(0),true);
                 }
             }
           }
           if(_itemLength <= 0){  //Initialize the player to play live content when the list is empty
             // Player initialization
             FnAudioInit();
           }
         }
         return false;
       })