制作音乐播放界面

制作音乐播放界面可以分为以下几个步骤：

1. 设计界面布局：确定播放器的各个组件的位置和大小，例如播放/暂停按钮、进度条、音量控制、歌曲列表等。

2. 编写 HTML 结构：将设计好的布局转化为 HTML 结构，使用 CSS 样式美化界面。

3. 编写 JavaScript 逻辑：实现播放、暂停、切歌、音量控制、进度条拖拽等功能。

以下是一个简单的音乐播放器界面示例代码：

HTML 代码：

<div class="player">
  <div class="song-info">
    <h2 class="song-title">歌曲名称</h2>
    <p class="song-artist">歌手名</p>
  </div>
  <div class="controls">
    <button class="play-pause-btn">播放</button>
    <button class="prev-btn">上一首</button>
    <button class="next-btn">下一首</button>
    <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
  </div>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
  <ul class="song-list">
    <li class="song-item">歌曲1</li>
    <li class="song-item">歌曲2</li>
    <li class="song-item">歌曲3</li>
  </ul>
</div>

CSS 代码：

.player {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 5px;
}

.song-info {
  text-align: center;
  margin-bottom: 20px;
}

.song-title {
  font-size: 24px;
  margin: 0;
}

.song-artist {
  font-size: 16px;
  margin: 0;
}

.controls button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.volume-slider {
  width: 100px;
}

.progress-bar {
  height: 10px;
  background-color: #ddd;
}

.progress {
  height: 10px;
  background-color: #4CAF50;
}

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

.song-item {
  font-size: 16px;
  margin: 5px 0;
  cursor: pointer;
}

JavaScript 代码：

const audio = new Audio();
let currentSongIndex = 0;
const songList = ['song1.mp3', 'song2.mp3', 'song3.mp3'];

function playSong() {
  audio.src = songList[currentSongIndex];
  audio.play();
}

function pauseSong() {
  audio.pause();
}

function togglePlayPause() {
  if (audio.paused) {
    playSong();
  } else {
    pauseSong();
  }
}

function playNextSong() {
  currentSongIndex = (currentSongIndex + 1) % songList.length;
  playSong();
}

function playPrevSong() {
  currentSongIndex = (currentSongIndex - 1 + songList.length) % songList.length;
  playSong();
}

function setVolume() {
  audio.volume = parseFloat(this.value);
}

function updateProgress() {
  const progress = document.querySelector('.progress');
  const progressPercent = (audio.currentTime / audio.duration) * 100;
  progress.style.width = `${progressPercent}%`;
}

function setProgress(e) {
  const progressBar = document.querySelector('.progress-bar');
  const progress = document.querySelector('.progress');
  const width = progressBar.offsetWidth;
  const clickX = e.offsetX;
  const duration = audio.duration;
  audio.currentTime = (clickX / width) * duration;
  progress.style.width = `${(clickX / width) * 100}%`;
}

function init() {
  const playPauseBtn = document.querySelector('.play-pause-btn');
  const nextBtn = document.querySelector('.next-btn');
  const prevBtn = document.querySelector('.prev-btn');
  const volumeSlider = document.querySelector('.volume-slider');
  const songListItems = document.querySelectorAll('.song-item');

  playPauseBtn.addEventListener('click', togglePlayPause);
  nextBtn.addEventListener('click', playNextSong);
  prevBtn.addEventListener('click', playPrevSong);
  volumeSlider.addEventListener('input', setVolume);
  audio.addEventListener('timeupdate', updateProgress);
  audio.addEventListener('ended', playNextSong);
  songListItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      currentSongIndex = index;
      playSong();
    });
  });

  const progressBar = document.querySelector('.progress-bar');
  progressBar.addEventListener('click', setProgress);
}

init();

以上代码实现了一个简单的音乐播放器界面，包括播放、暂停、切歌、音量控制、进度条拖拽等功能。当用户点击播放按钮时，播放器会播放当前选中的歌曲，点击暂停按钮则会暂停当前歌曲的播放。用户可以通过上一首和下一首按钮切换歌曲，也可以通过歌曲列表点击选择需要播放的歌曲。音量控制使用了一个滑动条来实现，进度条使用了一个绿色的小块来显示歌曲播放进度，用户可以通过拖拽进度条来快进或快退歌曲。