如何用Vue3打造一个酷炫的音乐播放器

news2025/1/15 13:35:16

Alt

本文由ScriptEcho平台提供技术支持

项目地址：传送门

Spotify音乐卡片组件

应用场景

本代码用于构建一个类似于Spotify音乐播放器中的音乐卡片组件，可展示歌曲信息、控制播放、调节音量等功能。

基本功能

该音乐卡片组件主要包含以下功能：

**歌曲信息展示：**显示歌曲标题、艺术家名称和专辑封面。
**播放控制：**提供播放/暂停、上一曲、下一曲等控制按钮。
**音量调节：**允许用户通过滑动条调节音量。
**收藏：**用户可以点击心形图标将歌曲收藏到播放列表中。
**进度条：**显示歌曲的当前播放进度和总时长。

功能实现步骤及关键代码分析

1. HTML结构

该组件的HTML结构如下：

<template>
  <div class="card">
    <!-- 歌曲信息 -->
    <div class="top">
      <div class="pfp">
        <!-- 播放状态动画 -->
        <div class="playing">
          <div class="greenline line-1"></div>
          <div class="greenline line-2"></div>
          <div class="greenline line-3"></div>
          <div class="greenline line-4"></div>
          <div class="greenline line-5"></div>
        </div>
      </div>
      <div class="texts">
        <p class="title-1">Soldiers Rage</p>
        <p class="title-2">Tha Mechanic</p>
      </div>
    </div>

    <!-- 播放控制和音量调节 -->
    <div class="controls">
      <svg class="volume_button">...</svg>
      <div class="volume">...</div>
      <svg>...</svg>
      <svg>...</svg>
      <svg>...</svg>
      <div class="air">...</div>
      <svg class="heart">...</svg>
    </div>

    <!-- 进度条 -->
    <div class="song-time">
      <p class="timetext time_now">1:31</p>
      <div class="time">
        <div class="elapsed"></div>
      </div>
      <p class="timetext time_full">3:46</p>
    </div>
  </div>
</template>

2. 播放状态动画

播放状态动画使用@keyframes和animation属性实现。当播放时，绿色线条会以不同的延迟逐个缩放，模拟出播放的动效。

@keyframes playing {
  0% {
    transform: scaleY(0.1);
  }

  33% {
    transform: scaleY(0.6);
  }

  66% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.1);
  }
}

.playing {
  animation: infinite playing 1s ease-in-out;
}

3. 音量调节

音量调节功能通过滑动条实现。当用户点击音量按钮时，音量调节控件会出现，用户可以通过拖动滑块调节音量。

<div class="volume">
  <div class="slider">
    <div class="green"></div>
  </div>
  <div class="circle"></div>
</div>

4. 进度条

进度条使用HTML5的range元素实现。当歌曲播放时，elapsed元素的宽度会随着当前播放时间变化而动态更新。

<div class="song-time">
  <p class="timetext time_now">1:31</p>
  <div class="time">
    <div class="elapsed"></div>
  </div>
  <p class="timetext time_full">3:46</p>
</div>

总结与展望

开发这个音乐卡片组件是一个有趣的经历，它让我了解了如何使用HTML、CSS和JavaScript来创建交互式且美观的UI组件。未来，我计划对该组件进行以下拓展和优化：

**响应式设计：**使组件在不同屏幕尺寸下都能正常显示。
**自定义主题：**允许用户更改组件的主题和颜色。
**播放列表支持：**添加一个播放列表功能，允许用户管理和播放歌曲列表。
**歌词显示：**集成歌词显示功能，让用户可以在播放歌曲时查看歌词。

更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

扫码加入AI生成前端微信讨论群：