vue-aplayer插件也可以实现音乐播放和歌词滚动，但是只有对应的Vue2.x版本

image.png

npm下载aplayer插件

npm install aplayer --save

下载hls.js：

npm install hls.js --save

<template>
  <!-- 准备一个容器用来存放音乐播放器 -->
  <div id="aplayer"></div>
</template>

<script setup>
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { ref, onMounted } from "vue";
// 歌曲列表
const audio = ref([
  {
    name: "如愿", // 歌曲名称
    artist: "王菲", // 歌曲作者
    // 歌曲url地址
    url: "http://m701.music.126.net/20240118221322/9997baaa0693a055267b528cf28ef375/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/11311694172/21d2/d4cb/6742/f3ed5c3de392bdd095a4f8d437b65b6b.m4a",
    // 歌曲封面
    cover:
      "http://p1.music.126.net/zfdCU3cL-dsTqVvjmKPrjg==/109951169222823883.jpg",
    // 歌词
    lrc: "",
    // 主题
    theme: "rgb(61, 162, 230)",
  },
  {
    name: "如愿", // 歌曲名称
    artist: "王菲", // 歌曲作者
    // 歌曲url地址
    url: "http://m701.music.126.net/20240118221322/9997baaa0693a055267b528cf28ef375/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/11311694172/21d2/d4cb/6742/f3ed5c3de392bdd095a4f8d437b65b6b.m4a",
    // 歌曲封面
    cover:
      "http://imge.kugou.com/stdmusic/150/20200606/20200606220631519630.jpg",
    // 歌词
    lrc: "",
    // 主题
    theme: "rgb(61, 162, 230)",
  },
]);
// 其他配置信息
const info = ref({
  fixed: false, // 不开启吸底模式
  listFolded: true, // 折叠歌曲列表
  autoplay: true, // 开启自动播放
  preload: "auto", // 自动预加载歌曲
  loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
  order: "list", //  播放模式，list列表播放, random随机播放
  lrcType: 1, //使用js字符串格式加载歌词
});
const initAudio = () => {
  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: audio.value, // 音乐信息
    ...info.value, // 其他配置信息
  });
};
onMounted(() => {
  // 初始化播放器
  initAudio();
});
</script>