为网站添加音乐播放器，用静态页面轻松实现

2024-01-11 12:33:53

前奏：邂逅h-music的诞生

在繁杂的数字世界中，音乐始终是抚慰心灵的良药，它能让我们暂时忘却烦恼，沉浸在旋律的海洋中。作为一个音乐爱好者，我常常会将喜欢的音乐分享给我的朋友们，希望能把这美好的体验传递给更多人。

为了实现这一目标，我萌生了开发一个音乐播放器的想法，这个播放器不仅可以让我分享音乐，还可以让其他用户在浏览我的网站时享受音乐的陪伴。经过深思熟虑，我决定使用静态页面来实现这个音乐播放器。

第一乐章：HTML基础搭建

首先，我们需要搭建一个静态页面的骨架，这是音乐播放器赖以生存的载体。为了让页面更加美观，我采用了流行的flex布局，它可以轻松实现元素的排列和对齐。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="index.scss">
</head>
<body>
  <div class="container">
    <!-- 音乐播放器主体 -->
  </div>
</body>
</html>

第二乐章：CSS赋予音乐播放器生命

在完成了HTML的基础搭建后，接下来我们要用CSS赋予音乐播放器生命，让它变得美观且富有动感。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

这段代码定义了音乐播放器的外观，使其在页面中居中对齐。

.player {
  width: 500px;
  height: 200px;
  background-color: #181818;
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}

这段代码定义了音乐播放器的样式，包括宽度、高度、背景颜色、颜色、填充和边框半径。

第三乐章：JavaScript添加交互元素

为了让音乐播放器能够真正地播放音乐，我们需要使用JavaScript添加交互元素，例如播放、暂停、上一曲、下一曲等功能。

// 获取音乐播放器元素
const player = document.querySelector('.player');

// 获取音乐播放按钮
const playButton = document.querySelector('.play-button');

// 获取音乐暂停按钮
const pauseButton = document.querySelector('.pause-button');

// 获取音乐上一曲按钮
const prevButton = document.querySelector('.prev-button');

// 获取音乐下一曲按钮
const nextButton = document.querySelector('.next-button');

// 获取音乐进度条
const progressbar = document.querySelector('.progressbar');

// 定义音乐播放状态
let isPlaying = false;

// 定义当前播放音乐的索引
let currentSongIndex = 0;

// 定义音乐列表
const songs = [
  {
    title: 'Song 1',
    artist: 'Artist 1',
    src: 'song1.mp3'
  },
  {
    title: 'Song 2',
    artist: 'Artist 2',
    src: 'song2.mp3'
  },
  // ...
];

// 为播放按钮添加点击事件监听器
playButton.addEventListener('click', () => {
  // 如果音乐正在播放，则暂停音乐
  if (isPlaying) {
    player.pause();
    isPlaying = false;
    playButton.classList.remove('active');
    pauseButton.classList.add('active');
  } else {
    // 如果音乐没有播放，则播放音乐
    player.play();
    isPlaying = true;
    playButton.classList.add('active');
    pauseButton.classList.remove('active');
  }
});

// 为暂停按钮添加点击事件监听器
pauseButton.addEventListener('click', () => {
  // 暂停音乐
  player.pause();
  isPlaying = false;
  playButton.classList.add('active');
  pauseButton.classList.remove('active');
});

// 为上一曲按钮添加点击事件监听器
prevButton.addEventListener('click', () => {
  // 切换到上一曲音乐
  currentSongIndex--;
  if (currentSongIndex < 0) {
    currentSongIndex = songs.length - 1;
  }
  loadSong(songs[currentSongIndex]);
  player.play();
  isPlaying = true;
  playButton.classList.add('active');
  pauseButton.classList.remove('active');
});

// 为下一曲按钮添加点击事件监听器
nextButton.addEventListener('click', () => {
  // 切换到下一曲音乐
  currentSongIndex++;
  if (currentSongIndex >= songs.length) {
    currentSongIndex = 0;
  }
  loadSong(songs[currentSongIndex]);
  player.play();
  isPlaying = true;
  playButton.classList.add('active');
  pauseButton.classList.remove('active');
});

// 定义加载音乐的函数
function loadSong(song) {
  // 设置音乐播放器的歌曲源
  player.src = song.src;

  // 设置音乐播放器的歌曲标题
  document.querySelector('.song-title').innerHTML = song.title;

  // 设置音乐播放器的歌手
  document.querySelector('.song-artist').innerHTML = song.artist;
}

// 为音乐播放器添加加载事件监听器
player.addEventListener('loadeddata', () => {
  // 设置音乐播放器的总时长
  document.querySelector('.duration').innerHTML = formatTime(player.duration);
});

// 为音乐播放器添加时间更新事件监听器
player.addEventListener('timeupdate', () => {
  // 更新音乐播放器的进度条
  progressbar.value = (player.currentTime / player.duration) * 100;

  // 设置音乐播放器的当前播放时间
  document.querySelector('.current-time').innerHTML = formatTime(player.currentTime);
});

// 定义格式化时间的函数
function formatTime(time) {
  // 将时间转换为秒
  const seconds = Math.floor(time);

  // 将秒转换为分钟和秒
  const minutes = Math.floor(seconds / 60);
  const secondsLeft = seconds % 60;

  // 格式化分钟和秒
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const formattedSeconds = secondsLeft < 10 ? `0${secondsLeft}` : secondsLeft;

  // 返回格式化后的时间
  return `${formattedMinutes}:${formattedSeconds}`;
}