前端播放器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;
       })
   

   　　

前端播放器js实现播放列表上一曲下一曲删除节目功能

原文：https://www.cnblogs.com/webXiaoAYang/p/10945482.html