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

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

添加到列表
思路：用数组，将节目名称添加到数组中，通过判断数组来实现，上代码

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');  //在播放列表中添加样式给当前节目

  }

上一曲，下一曲　
思路：判断当前节目的下标 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');
  };

播放器左右按钮的显示隐藏

思路：也是根据当前节目下标playListIndex 和节目总长度_itemLength 来判断如果当前节目下标为0就是第一曲，上一曲箭头隐藏，下一曲箭头显示
如果当前节目下标等于节目列表总数量-1也就是最后一曲，下一曲箭头隐藏，上一曲箭头显示
如过当前节目下标都不满足上述的两个条件，就是在列表中间，此时上一曲和下一曲箭头都显示

删除列表中的某一节目
思路：判断数组中是否有这个节目，获取到下标后删除
重点：数组的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实现播放列表上一曲下一曲删除节目功能

猜你喜欢