前端播放器js實現播放列表上一曲下一曲刪除節目功能

關於前端播放器上一曲，下一曲，播放列表的增刪改查等等的功能，今天給大家詳細解說下邏輯實現

1. 添加到列表
   思路：用數組，將節目名稱添加到數組中，通過判斷數組來實現，上代碼
   

   var idList = [] , //節目數組 先var一個空數組
   playListIndex = 0; //播放列表當前節目的下標  再定義一個變量來存放下標
   
   function FnAddList(list_data){  //list_data是一個對象，里邊存放着節目名稱，播放時長等等的東西
       var _id = list_data.title,  //節目名稱
           _isAdd = true,    //判斷條件
           _index = 0;    //下標
       for(var i=0; i<idList.length; i++){   //遍歷數組中的值
           if(_id == idList[i]){   //判斷數組中是否有這個標題
               _isAdd = false;
               _index = i;  //標題在數組中的位置下標
           }
       }
       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="刪除"></span></div></li>';
         $('#playList-list ul').prepend(_playListHtml);   //添加到頁面中
   
         
       }
       playListIndex = _index;  
       var _playListLength = $('#playList-list ul .playList-list-item').length-1;
       // 當調用 FnAddList 時給列表節目添加 active
       $('#playList-list ul .playList-list-item').eq(_index).addClass('active').siblings().removeClass('active');  //在播放列表中添加樣式給當前節目
   
     }
   
   

    

2. 上一曲，下一曲　
   思路：判斷當前節目的下標 playListIndex  默認為0，上一曲就-1 下一曲就+1
   

   var _item , _itemLength;  //節目節點和節目總數  全局變量
     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. 播放器左右按鈕的顯示隱藏
   
   思路：也是根據 當前節目下標playListIndex 和節目總長度_itemLength 來判斷  如果當前節目下標為0就是第一曲，上一曲箭頭隱藏，下一曲箭頭顯示
   如果當前節目下標等於節目列表總數量-1也就是最后一曲，下一曲箭頭隱藏，上一曲箭頭顯示
   如過當前節目下標都不滿足上述的兩個條件，就是在列表中間，此時上一曲和下一曲箭頭都顯示
   
   
4. 刪除列表中的某一節目
   思路：判斷數組中是否有這個節目，獲取到下標后刪除
   重點：數組的indexOf方法從前往后會返回一個下標 兩個參數 1：要查找的項，2：開始查找的位置，一般為0
   數組的splice方法刪除某個數組中的值 兩個參數 1：要查找項在數組中的下標，2：從參數1指定的位置開始刪除幾項  1 就是刪除一個
   

   // 點擊刪除節目
       $(document).on('click','.playList-list-btns-remove',function(){
         var _this = $(this),  //當前節點
         _this_title = _this.attr('data-title'),  //當前節目的標題
         _arrIndex;  //要刪除節目的下標
         isRemoveBtnsClick = true;  //判斷是刪除事件
         if(idList.indexOf(_this_title,0) != -1){
           _arrIndex = idList.indexOf(_this_title,0);
           idList.splice(_arrIndex,1);
           _this.parent().parent().remove();  //刪除點擊的節目
           _item = $('#playList-list ul .playList-list-item');
           _itemLength = _item.length;  //刪除一次節目重新記錄一下列表節目的長度  節目列表總數量
           _nextItemIndex = _arrIndex;  
           if(_this.parent().parent().hasClass('active')){
             playListIndex = _arrIndex;  //將要刪除項的下標賦值給playListIndex ，此變量為全局變量，會用在上一曲下一曲方法中
             if(_nextItemIndex<0){  //判斷點擊節目下標小於0默認下標為0，播放第一條
                 _nextItemIndex = 0;
             }else if(_nextItemIndex>_itemLength){  //判斷點擊節目下標大於節目列表總數量就等於總數量，播放最后一條
                 _nextItemIndex = _itemLength - 1;
             }else{  //判斷點擊節目下標大於0且小於總長度
                 if(_nextItemIndex <= _itemLength - 1){  //判斷點擊節目下標大於0且小於或等於總長度，就播放下一個
                   var _this = _item.eq(_nextItemIndex);
                   FnAudioPlay(_this,true);
                 }else{  //如果刪除列表中最后一條正在播放的節目就播放列表中的第一條  判斷點擊節目下標為最后一條，就播放第一曲
                   FnAudioPlay(_item.eq(0),true);
                 }
             }
           }
           if(_itemLength <= 0){  //當列表空的時候初始化播放器播放直播內容
             // 播放器初始化
             FnAudioInit();
           }
         }
         return false;
       })