快速实现 Material Design 风格的滚动播放器 UI

Material Design 是一种流行的设计风格，它强调简单、清晰和直观的用户体验。在前端开发中，我们可以使用 Material Design 风格的 UI 组件来提高应用程序的可用性和美观性。本文将介绍如何快速实现 Material Design 风格的滚动播放器 UI。

设计思路

在设计滚动播放器 UI 之前，我们需要了解 Material Design 风格的设计原则。其中，重要的原则包括：

• 卡片式设计：使用卡片来组织内容，并提供清晰的边框和投影效果。
• 可点击性：使用明显的可点击元素来引导用户进行操作。
• 色彩和图标：使用鲜艳的色彩和清晰的图标来提高可视化效果。

基于这些原则，我们可以设计一个简单的滚动播放器 UI，包括以下元素：

• 播放器卡片：包含歌曲封面、歌曲名称和歌手名称。
• 播放控制按钮：包括播放/暂停、上一曲和下一曲按钮。
• 播放进度条：显示当前播放进度和总时长。

实现步骤

步骤一：布局 HTML 结构

我们可以使用 HTML 和 CSS 来实现滚动播放器 UI。首先，我们需要定义播放器卡片和控制按钮的 HTML 结构。以下是一个示例代码：

// javascriptcn.com 代码示例
<div class="player-card">
  <img src="song-cover.jpg" alt="Song Cover">
  <div class="song-info">
    <h3 class="song-name">Song Name</h3>
    <p class="singer-name">Singer Name</p>
  </div>
</div>

<div class="player-controls">
  <button class="prev-button"></button>
  <button class="play-button"></button>
  <button class="next-button"></button>
</div>

<div class="player-progress">
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
  <div class="time-info">
    <span class="current-time">00:00</span>
    <span class="total-time">00:00</span>
  </div>
</div>

步骤二：添加 CSS 样式

接下来，我们需要使用 CSS 样式来定义滚动播放器的外观。以下是一个示例代码：

// javascriptcn.com 代码示例
/* Player Card */
.player-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  padding: 16px;
  margin-bottom: 16px;
}

.player-card img {
  width: 64px;
  height: 64px;
  margin-right: 16px;
  object-fit: cover;
}

.song-info {
  flex-grow: 1;
}

.song-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
}

.singer-name {
  margin: 0;
  font-size: 0.8rem;
  color: #999;
}

/* Player Controls */
.player-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.player-controls button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0 16px;
  width: 48px;
  height: 48px;
}

.player-controls button:hover {
  background-color: #f5f5f5;
  border-radius: 50%;
}

.prev-button {
  background-image: url(prev-icon.svg);
  background-size: 24px 24px;
  background-repeat: no-repeat;
}

.play-button {
  background-image: url(play-icon.svg);
  background-size: 24px 24px;
  background-repeat: no-repeat;
}

.pause-button {
  background-image: url(pause-icon.svg);
  background-size: 24px 24px;
  background-repeat: no-repeat;
}

.next-button {
  background-image: url(next-icon.svg);
  background-size: 24px 24px;
  background-repeat: no-repeat;
}

/* Player Progress */
.player-progress {
  display: flex;
  align-items: center;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #f5f5f5;
  border-radius: 2px;
  margin: 0 16px;
  position: relative;
}

.progress {
  width: 50%;
  height: 100%;
  background-color: #2196f3;
  border-radius: 2px;
}

.time-info {
  display: flex;
  justify-content: space-between;
  width: 100px;
  font-size: 0.8rem;
  color: #999;
}

步骤三：添加 JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现播放器的功能。以下是一个示例代码：

// javascriptcn.com 代码示例
const player = document.querySelector('.player-card');
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 progress = document.querySelector('.progress');
const progressBar = document.querySelector('.progress-bar');
const currentTime = document.querySelector('.current-time');
const totalTime = document.querySelector('.total-time');

let isPlaying = false;
let currentSongIndex = 0;
let songs = [
  {
    name: 'Song 1',
    singer: 'Singer 1',
    cover: 'song-1.jpg',
    url: 'song-1.mp3',
    duration: 180
  },
  {
    name: 'Song 2',
    singer: 'Singer 2',
    cover: 'song-2.jpg',
    url: 'song-2.mp3',
    duration: 240
  },
  {
    name: 'Song 3',
    singer: 'Singer 3',
    cover: 'song-3.jpg',
    url: 'song-3.mp3',
    duration: 300
  }
];

function updateSongInfo() {
  const song = songs[currentSongIndex];
  const cover = player.querySelector('img');
  const songName = player.querySelector('.song-name');
  const singerName = player.querySelector('.singer-name');

  cover.src = song.cover;
  songName.textContent = song.name;
  singerName.textContent = song.singer;
  totalTime.textContent = formatTime(song.duration);
}

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const formattedSeconds = remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds;

  return `${formattedMinutes}:${formattedSeconds}`;
}

function updateProgress() {
  const song = songs[currentSongIndex];
  const currentTimeValue = formatTime(Math.floor(audio.currentTime));
  const totalTimeValue = formatTime(song.duration);
  const progressValue = (audio.currentTime / song.duration) * 100;

  currentTime.textContent = currentTimeValue;
  progress.style.width = `${progressValue}%`;
}

function playSong() {
  const song = songs[currentSongIndex];
  audio.src = song.url;
  audio.play();
  isPlaying = true;
  playButton.style.display = 'none';
  pauseButton.style.display = 'block';
  updateSongInfo();
}

function pauseSong() {
  audio.pause();
  isPlaying = false;
  playButton.style.display = 'block';
  pauseButton.style.display = 'none';
}

function prevSong() {
  currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
  if (isPlaying) {
    playSong();
  } else {
    updateSongInfo();
  }
}

function nextSong() {
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  if (isPlaying) {
    playSong();
  } else {
    updateSongInfo();
  }
}

function seek(e) {
  const song = songs[currentSongIndex];
  const seekTime = (e.offsetX / progressBar.offsetWidth) * song.duration;
  audio.currentTime = seekTime;
  updateProgress();
}

const audio = new Audio();
audio.addEventListener('timeupdate', updateProgress);
progressBar.addEventListener('click', seek);
playButton.addEventListener('click', playSong);
pauseButton.addEventListener('click', pauseSong);
prevButton.addEventListener('click', prevSong);
nextButton.addEventListener('click', nextSong);

updateSongInfo();

总结

本文介绍了如何快速实现 Material Design 风格的滚动播放器 UI。通过了解设计原则、布局 HTML 结构、添加 CSS 样式和编写 JavaScript 代码，我们可以创建一个美观、易用的播放器。希望本文对你有所帮助，谢谢阅读！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6584ce3bd2f5e1655df628c0