如何用Vue3构建一个交互式音乐播放器

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

项目地址：传送门

Vue.js 开发音乐播放器卡片

应用场景

这款音乐播放器卡片旨在为音乐应用程序提供一个现代而交互式的用户界面。它包含诸如歌曲信息、播放进度条和控制按钮等关键功能。

基本功能

• **歌曲信息显示：**卡片显示歌曲标题、艺术家和专辑信息。
• **播放进度跟踪：**一个进度条显示歌曲的当前播放时间和总持续时间。
• **播放控制：**播放、暂停、上一曲和下一曲按钮允许用户控制歌曲播放。
• **收藏功能：**用户可以通过点击心形图标收藏歌曲。

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

歌曲信息显示

<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">
  {
  { songTitle }}
</h3>
<p class="text-gray-500 dark:text-gray-400">
  {
  { artistName }}
</p>

Vue.js 中的 { { }} 插值语法用于动态显示歌曲标题和艺术家姓名，这些数据是从组件的 props 中传递的。

播放进度跟踪

<div class="flex items-center">
  <svg
    class="h-5 w-5 text-gray-500 dark:text-gray-400"
    fill="none"
    height="24"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
  </svg>
  <div class="w-full mx-3">
    <div
      class="relative mt-1 h-1 bg-gray-200 rounded overflow-hidden dark:bg-gray-800"
    >
      <div class="absolute left-0 top-0 h-full bg-yellow-500 w-1/2">