原生js音乐播放器播放列表

以下是一个基本的原生JS音乐播放器，包含播放列表功能：

HTML代码：

<div id="music-player">
  <div class="player-controls">
    <button id="play-pause-btn">播放</button>
    <input type="range" id="seek-slider" min="0" value="0">
    <span id="current-time">0:00</span> / <span id="duration">0:00</span>
    <button id="prev-btn">上一首</button>
    <button id="next-btn">下一首</button>
  </div>
  <ul class="playlist">
    <li data-src="path/to/song1.mp3">歌曲1</li>
    <li data-src="path/to/song2.mp3">歌曲2</li>
    <li data-src="path/to/song3.mp3">歌曲3</li>
  </ul>
</div>

CSS代码：

#music-player {
  width: 500px;
  margin: 0 auto;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.playlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.playlist li {
  cursor: pointer;
  padding: 5px;
}

.playlist li:hover {
  background-color: #f5f5f5;
}

JS代码：

const musicPlayer = document.getElementById('music-player');
const playPauseBtn = musicPlayer.querySelector('#play-pause-btn');
const seekSlider = musicPlayer.querySelector('#seek-slider');
const currentTimeLabel = musicPlayer.querySelector('#current-time');
const durationLabel = musicPlayer.querySelector('#duration');
const prevBtn = musicPlayer.querySelector('#prev-btn');
const nextBtn = musicPlayer.querySelector('#next-btn');
const playlist = musicPlayer.querySelector('.playlist');
const audio = new Audio();
let currentSongIndex = 0;
let playlistItems;

// 初始化播放列表
function initPlaylist() {
  playlistItems = playlist.querySelectorAll('li');
  playlistItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      currentSongIndex = index;
      playSong(currentSongIndex);
    });
  });
}

// 播放/暂停按钮事件处理函数
function togglePlayPause() {
  if (audio.paused) {
    playPauseBtn.textContent = '暂停';
    audio.play();
  } else {
    playPauseBtn.textContent = '播放';
    audio.pause();
  }
}

// 上一首按钮事件处理函数
function playPrevSong() {
  currentSongIndex--;
  if (currentSongIndex < 0) {
    currentSongIndex = playlistItems.length - 1;
  }
  playSong(currentSongIndex);
}

// 下一首按钮事件处理函数
function playNextSong() {
  currentSongIndex++;
  if (currentSongIndex >= playlistItems.length) {
    currentSongIndex = 0;
  }
  playSong(currentSongIndex);
}

// 播放指定索引的歌曲
function playSong(index) {
  const songSrc = playlistItems[index].getAttribute('data-src');
  audio.src = songSrc;
  audio.load();
  audio.play();
  playPauseBtn.textContent = '暂停';
}

// 更新播放进度条和当前时间标签
function updateProgress() {
  seekSlider.value = audio.currentTime;
  const currentMinutes = Math.floor(audio.currentTime / 60);
  const currentSeconds = Math.floor(audio.currentTime % 60);
  currentTimeLabel.textContent = `${currentMinutes}:${currentSeconds.toString().padStart(2, '0')}`;
}

// 初始化音乐播放器
function initPlayer() {
  initPlaylist();
  audio.addEventListener('loadedmetadata', () => {
    const totalMinutes = Math.floor(audio.duration / 60);
    const totalSeconds = Math.floor(audio.duration % 60);
    durationLabel.textContent = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`;
    seekSlider.max = audio.duration;
  });
  audio.addEventListener('timeupdate', updateProgress);
  playPauseBtn.addEventListener('click', togglePlayPause);
  prevBtn.addEventListener('click', playPrevSong);
  nextBtn.addEventListener('click', playNextSong);
  seekSlider.addEventListener('input', () => {
    audio.currentTime = seekSlider.value;
  });
  playSong(currentSongIndex);
}

initPlayer();

这段代码实现了基本的音乐播放器功能，包括播放/暂停、上一首/下一首、播放进度条和播放列表功能。你可以根据自己的需求进行修改和扩展。