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

ゝ一纸荒年。 2021-12-09 05:41 239阅读 0赞

关于前端播放器上一曲，下一曲，播放列表的增删改查等等的功能，今天给大家详细解说下逻辑实现

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;
            })

转载于:https://www.cnblogs.com/webXiaoAYang/p/10945482.html