基于Vue3的简易旋转音乐播放器

先看效果图：

在音乐播放时，右下角的图标会不停旋转，暂停时恢复原位。

完整代码

具体实现如下：

一、基本样式

旋转动画的实现

.rotate

• 添加了一个名为 rotation 的动画效果，持续时间为 2 秒，动画类型为线性，且无限循环。
• 动画效果定义在 @keyframes rotation 中，从 0 度旋转到 360 度。

@keyframes rotation

• 定义了一个名为 rotation 的动画效果。
• 动画从 0 度旋转到 360 度，实现了一个完整的旋转动作。

我们在iconfont-阿里巴巴矢量图标库中搜索音乐图标，选择一个下载svg或png图片，复制到src/assets/pictures路径下：

二、实现音乐播放功能

1.初始化audio对象

新建MusicPlayer.vue组件：

使用vue3组合式API创建响应式对象：

        audio管理Audio对象

        isRotate管理图片旋转和音乐播放的状态

对audio添加事件侦听器，当音乐播放结束后将isRotate的属性赋值false，同时去除img标签的rotete类

2.音乐播放

import { ElNotification } from "element-plus";

const musicName=ref('骆集益 - 回梦游仙.mp3');

const toggleRotate = () => {
  isRotate.value = !isRotate.value;
  if (isRotate.value) {
    document.querySelector(".rotatingImage").classList.add("rotate");
    ElNotification({
      title: "继续播放",
      message: musicName.value,
      type: "success",
    });
    audio.value.play();
    console.log(audio.value.currentTime)
  } else {
    document.querySelector(".rotatingImage").classList.remove("rotate");
    ElNotification({
      title: "已暂停播放",
      message: "",
      type: "info",
    });
    audio.value.pause();
  }
};

img绑定点击事件toggleRotate，点击后isRotate属性值为true，调用audio.value.play()方法播放音乐，同时添加rotate类使图片不断旋转，并引入element-plus组件库中的Notification 通知以弹出音乐播放信息，再次点击后isRotate为false，暂停播放和图片动画。

三、改进

在通知Notification 中，可添加audio的currentTime对象以显示当前音乐的播放进度

使用Vite提供的import.meta.glob方法可批量导入music路径下的音频文件，获取所有音频文件的路径和文件名，实现在静态项目中动态导入和切换音乐。