如何用JavaScript、HTML实现网页6首歌的随机播放列表？

核心问题解决思路 #

1. 解决歌曲重叠播放：复用单个<audio>元素，切换歌曲时自动停止上一首；或者播放新歌曲前暂停所有音频。
2. 实现顺序播放：维护播放列表与当前索引，监听音频ended事件自动播放下一首。
3. 实现随机播放：记录已播放歌曲索引，每次随机选取未播放的歌曲，避免重复。

完整代码示例 #

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- 播放控制按钮 -->
<div class="playlist-controls">
  <button class="btn-order">顺序播放</button>
  <button class="btn-random">随机播放</button>
</div>
<!-- 歌曲列表 -->
<ul class="song-list">
  <li class="song-item" data-src="flame.mp3">火焰</li>
  <li class="song-item" data-src="song2.mp3">歌曲2</li>
  <li class="song-item" data-src="song3.mp3">歌曲3</li>
  <li class="song-item" data-src="song4.mp3">歌曲4</li>
  <li class="song-item" data-src="song5.mp3">歌曲5</li>
  <li class="song-item" data-src="song6.mp3">歌曲6</li>
</ul>
<!-- 复用的音频播放器 -->
<audio id="audio-player" preload="auto"></audio>

<script>
// 获取播放器DOM元素
var player = $("#audio-player")[0];
// 提取所有歌曲路径到数组
var songPaths = $(".song-item").map(function() {
  return $(this).data("src");
}).get();
// 当前播放索引
var currentIdx = 0;
// 是否开启随机模式
var randomMode = false;
// 记录已播放的随机歌曲索引
var playedRandomIds = [];

// 播放指定索引的歌曲
function playByIndex(idx) {
  if (idx < 0 || idx >= songPaths.length) return;
  // 暂停当前播放
  player.pause();
  // 切换歌曲源
  player.src = songPaths[idx];
  // 开始播放
  player.play();
  currentIdx = idx;
}

// 鼠标悬停播放单首歌
$(".song-item").mouseenter(function() {
  var songSrc = $(this).data("src");
  var idx = songPaths.indexOf(songSrc);
  playByIndex(idx);
});

// 顺序播放下一首
function playNextOrder() {
  currentIdx = (currentIdx + 1) % songPaths.length;
  playByIndex(currentIdx);
}

// 随机播放下一首（避免重复，播完一轮重置）
function playNextRandom() {
  if (playedRandomIds.length === songPaths.length) {
    playedRandomIds = [];
  }
  // 生成未播放过的随机索引
  var randomIdx;
  do {
    randomIdx = Math.floor(Math.random() * songPaths.length);
  } while (playedRandomIds.includes(randomIdx));
  playedRandomIds.push(randomIdx);
  playByIndex(randomIdx);
}

// 歌曲结束后自动播放下一首
player.addEventListener("ended", function() {
  randomMode ? playNextRandom() : playNextOrder();
});

// 顺序播放按钮事件
$(".btn-order").click(function() {
  randomMode = false;
  playedRandomIds = [];
  if (player.paused) {
    currentIdx = 0;
    playByIndex(currentIdx);
  }
});

// 随机播放按钮事件
$(".btn-random").click(function() {
  randomMode = true;
  playedRandomIds = [];
  if (player.paused) {
    playNextRandom();
  }
});
</script>

代码说明 #

• 复用单个audio元素：避免多个音频同时播放，从根源解决重叠问题。
• data-src属性存储路径：将歌曲路径与列表项绑定，方便维护和获取。
• 统一播放函数：playByIndex封装暂停、切换源、播放逻辑，减少重复代码。
• 顺序播放逻辑：通过索引递增+取模实现循环播放所有歌曲。
• 随机播放逻辑：用数组记录已播歌曲索引，确保每轮播放不重复，播完自动重置。
• ended事件监听：歌曲自然结束后自动触发下一首播放，实现连续播放。

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