其他分享
首页 > 其他分享> > 前端播放器js实现播放列表上一曲下一曲删除节目功能

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

      

标签:playList,下标,节目,playListIndex,list,js,一曲,播放列表
来源: https://www.cnblogs.com/webXiaoAYang/p/10945482.html