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

先看效果图：

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

完整代码

<script setup>
import { ref ,onMounted} from "vue";
import { ElNotification } from "element-plus";
import music from '@/assets/music/骆集益 - 回梦游仙.mp3'

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

onMounted(() => {
  audio.value = new Audio(music);
  audio.value.addEventListener('ended', () => {
    isRotate.value = false;
    document.querySelector(".rotatingImage").classList.remove("rotate");
  });
});
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();
  }
};
</script>

<template>
  <div class="image-container">
    <img
      class="rotatingImage"
      src="../assets/pictures/音乐.png"
      alt="旋转的图片"
      @click="toggleRotate"
    />
  </div>
</template>

<style scoped>
.image-container {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20%;
  right: 20px;
  :hover {
    cursor: pointer;
  }
}

.rotatingImage {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
}

.rotate {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

具体实现如下：

一、基本样式

<template>
  <div class="image-container">
    <img
      class="rotatingImage"
      src="../assets/pictures/音乐.png"
      alt="旋转的图片"
      @click="toggleRotate"
    />
  </div>
</template>

<style scoped>
.image-container {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20%;
  right: 20px;
  :hover {
    cursor: pointer;
  }
}

.rotatingImage {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
}

.rotate {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

旋转动画的实现

.rotate

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

@keyframes rotation

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

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

二、实现音乐播放功能

1.初始化audio对象

新建MusicPlayer.vue组件：

<script setup>
import { ref ,onMounted} from "vue";
import music from '@/assets/music/骆集益 - 回梦游仙.mp3'

const audio=ref(null);
const isRotate = ref(false);

onMounted(() => {
  audio.value = new Audio(music);
  audio.value.addEventListener('ended', () => {
    isRotate.value = false;
    document.querySelector(".rotatingImage").classList.remove("rotate");
  });
});
</script>

使用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路径下的音频文件，获取所有音频文件的路径和文件名，实现在静态项目中动态导入和切换音乐。