HTML5 audio播放列表页面加载随机选起始曲目且不打乱原有顺序实现方案

核心逻辑：不需要打乱原有播放列表的排序，仅需在页面初始化时生成随机起始播放索引即可，后续切歌完全保留原有音轨顺序。

修改后的JS代码 #

const shuffledPaths = [
    'https://estherhunziker.net/_sinai/test_01.mp3',
    'https://estherhunziker.net/_sinai/test_02.mp3',
    'https://estherhunziker.net/_sinai/test_03.mp3',
    'https://estherhunziker.net/_sinai/test_04.mp3',
    'https://estherhunziker.net/_sinai/test_05.mp3'
];

const player = document.querySelector('audio');
const source = document.querySelector('source');

// 唯一改动：初始化时生成随机起始索引，兼容原有切歌逻辑
let currentIndex = Math.floor(Math.random() * shuffledPaths.length) - 1;

function goNext() {
  currentIndex = (currentIndex + 1) % shuffledPaths.length;
  source.setAttribute('src', shuffledPaths[currentIndex]);
  player.load();
  player.play();
}

player.addEventListener('ended', goNext);
goNext();

可直接沿用的HTML代码 #

<audio controls="controls">
  <source type="audio/mpeg">
</audio>

逻辑说明 #

• 仅调整了currentIndex的初始值生成规则，原有音轨数组的排序、切歌逻辑完全没有改动，始终按照你预设的顺序连续播放
• 用Math.floor(Math.random() * shuffledPaths.length)生成0到音轨总数-1之间的合法随机索引，减1是为了兼容原有goNext函数的自增逻辑，无需修改原有成熟的切歌代码
• 随机起始的音轨播放完成后，会自动按照shuffledPaths的原有顺序播放下一首，循环逻辑也和之前保持一致

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