音乐播放器自定义播放队列功能开发故障求助

看起来你卡在了维护自定义播放队列状态这个点上——你的现有代码每次切换曲目都会重新获取选中的ID，而且循环逻辑混乱，导致无法按选中顺序播放。我帮你梳理下问题，然后给出可行的修复方案：

现有代码的核心问题 #

1. 队列状态未持久化：clickedQueue()每次调用都会重新获取选中的曲目ID，没有把选中的队列保存下来，导致切换下一曲时丢失之前的选择
2. 索引逻辑错误：clickedQueue()里一开始就i++，直接跳过了第一个选中的曲目；nextMusic()里的循环条件i < 2完全不符合需求，而且循环内的i++会导致索引跳步
3. 没有跟踪当前播放位置：没有变量记录当前播放到队列的哪一首，无法按顺序切换

修复后的完整代码方案 #

首先我们需要两个全局变量来维护队列状态，然后重构核心函数：

// 全局变量：保存选中的自定义播放队列、当前播放位置
let customQueue = [];
let currentQueuePos = 0;

function clickedQueue(){ 
  // 获取选中的曲目索引，转换为数字（注意：确保li-index是数字格式）
  customQueue = $('.artist-main-content-item')
    .map((_, el) => parseInt(el.getAttribute('li-index'), 10))
    .get(); 
  
  wrapper.classList.add("list"); 
  
  // 从队列的第一首开始播放
  currentQueuePos = 0;
  indexNumb = customQueue[currentQueuePos]; 
  loadMusic(indexNumb); 
  playMusic(); 
  playingSong(); 
} 

function nextMusic(){ 
  if (wrapper.classList.contains("list")) { 
    // 自定义队列模式：切换到下一首
    currentQueuePos++;
    // 循环播放：如果到队列末尾，回到开头（可根据需求改为停止）
    if (currentQueuePos >= customQueue.length) {
      currentQueuePos = 0;
    }
    indexNumb = customQueue[currentQueuePos];
  } else { 
    // 保留原有顺序播放逻辑
    toggleSequence(); 
    indexNumb++; 
    indexNumb > allMusic.length ? indexNumb = 1 : indexNumb = indexNumb; 
  } 
  
  loadMusic(indexNumb); 
  setTimeout(() => { 
    playMusic(); 
  }, 500); 
  playingSong(); 
} 

额外注意事项 #

• 索引一致性：确认li-index的数值和allMusic数组的索引规则一致（比如是1-based还是0-based）。你的现有代码里indexNumb > allMusic.length ? indexNumb =1看起来是1-based，所以要保证li-index也是从1开始的
• 上一曲功能：如果需要支持上一曲，同理写prevMusic()函数，逻辑是currentQueuePos--，当currentQueuePos < 0时设置为customQueue.length -1
• JSON语法修正：你提供的JSON示例有语法错误，正确的JS对象数组格式应该是：

[
  { "name": "Legend", "artist": "Twenty one pilots", "src": "twentyonepilotsLegend", "id": 25 },
  { "name": "Leave The City", "artist": "Twenty one pilots", "src": "twentyonepilotsLeaveTheCity", "id": 26 }
]

方案解释 #

• 用customQueue持久化保存选中的曲目索引，避免每次切换都重新获取
• currentQueuePos跟踪当前播放位置，确保按选中顺序依次切换曲目
• 简化了nextMusic()的逻辑，去掉了混乱的循环，让队列切换逻辑清晰可控

内容的提问来源于stack exchange，提问作者Adam Hunter