html音乐播放器js文件代码

以下是一个简单的 HTML 音乐播放器的 js 文件代码：

// 获取元素
const audioPlayer = document.querySelector('.audio-player');
const audio = new Audio();
const playBtn = document.querySelector('.play');
const volumeBtn = document.querySelector('.volume');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const progressContainer = document.querySelector('.progress-container');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');

// 设置歌曲列表
const playlist = [
  {
    name: '歌曲1',
    path: 'path/to/song1.mp3'
  },
  {
    name: '歌曲2',
    path: 'path/to/song2.mp3'
  },
  {
    name: '歌曲3',
    path: 'path/to/song3.mp3'
  }
];

// 设置默认歌曲索引
let currentSongIndex = 0;

// 加载歌曲
function loadSong(song) {
  audio.src = song.path;
  audioPlayer.querySelector('.title').textContent = song.name;
}

// 播放歌曲
function playSong() {
  audioPlayer.classList.add('playing');
  playBtn.querySelector('i.fas').classList.remove('fa-play');
  playBtn.querySelector('i.fas').classList.add('fa-pause');
  audio.play();
}

// 暂停歌曲
function pauseSong() {
  audioPlayer.classList.remove('playing');
  playBtn.querySelector('i.fas').classList.remove('fa-pause');
  playBtn.querySelector('i.fas').classList.add('fa-play');
  audio.pause();
}

// 更新进度条
function updateProgress(e) {
  const { duration, currentTime } = e.target;
  const progressPercent = (currentTime / duration) * 100;
  progressBar.style.width = `${progressPercent}%`;
  currentTimeEl.textContent = formatTime(currentTime);
  durationEl.textContent = formatTime(duration);
}

// 格式化时间
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = Math.floor(time % 60);
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  return `${minutes}:${seconds}`;
}

// 设置音量
function setVolume() {
  audio.volume = volumeSlider.value / 100;
}

// 切换音量显示
function toggleVolume() {
  volumeSlider.classList.toggle('active');
}

// 播放下一首歌曲
function nextSong() {
  currentSongIndex++;
  if (currentSongIndex > playlist.length - 1) {
    currentSongIndex = 0;
  }
  loadSong(playlist[currentSongIndex]);
  playSong();
}

// 播放上一首歌曲
function prevSong() {
  currentSongIndex--;
  if (currentSongIndex < 0) {
    currentSongIndex = playlist.length - 1;
  }
  loadSong(playlist[currentSongIndex]);
  playSong();
}

// 加载默认歌曲
loadSong(playlist[currentSongIndex]);

// 事件监听
playBtn.addEventListener('click', () => {
  const isPlaying = audioPlayer.classList.contains('playing');
  if (isPlaying) {
    pauseSong();
  } else {
    playSong();
  }
});

audio.addEventListener('timeupdate', updateProgress);

progressContainer.addEventListener('click', (e) => {
  const width = progressContainer.clientWidth;
  const clickX = e.offsetX;
  const duration = audio.duration;
  audio.currentTime = (clickX / width) * duration;
});

volumeBtn.addEventListener('click', toggleVolume);

volumeSlider.addEventListener('input', setVolume);

audio.addEventListener('ended', nextSong);

audioPlayer.querySelector('.next').addEventListener('click', nextSong);

audioPlayer.querySelector('.prev').addEventListener('click', prevSong);

注意：这是一个简单的示例代码，可能不适用于所有情况。如果您想要更复杂的功能，请参考其他资源或使用第三方库。