音乐播放器——APlayer

1.文档地址：aplayer.js.org/#/zh-Hans/
2.在vue3中的使用

<script setup>
  import { onMounted } from "vue"

  // 音乐随身听
  import APlayer from "APlayer"; // 引入音乐插件
  import "APlayer/dist/APlayer.min.css"; // 引入音乐插件的样式

  const audio = [ // 歌曲列表
    {
      name: "你被写在我的歌里", // 歌曲名字
      artist: "吴青峰", // 歌曲演唱者
      url:  "http://audio.kugou.com/audio/01.mp3", // 歌曲地址（这里用外链地址）
      cover: "http://imge.kugou.com/stdmusic/150/20170815/20170815070007812976.jpg", // 歌曲头像
      lrc: "", // 歌词
      theme: "rgb(127, 218, 180)", // 播放这首歌曲时的主题色
    },
    {
      name: "起风了",
      artist: "吴青峰",
      url: "http://audio.kugou.com/audio/02.mp3",
      cover: "http://imge.kugou.com/stdmusic/150/20200606/20200606220631519630.jpg",
      lrc: "",
      theme: "rgb(61, 162, 230)",
    }
  ]

  const info =  {
    fixed: false, // 不开启吸底模式
    listFolded: true, // 折叠歌曲列表
    autoplay: true, // 开启自动播放
    preload: "auto", // 自动预加载歌曲
    loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
    order: "list", //  播放模式，list列表播放, random随机播放
  }

  const  initAudio = ()=> {
    // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
    const ap = new APlayer({
      container: document.getElementById("aplayer"),
      audio: audio, // 音乐信息
      info, // 其他配置信息
    });
  }

  onMounted(initAudio)
</script>
<template>
    <div id="aplayer"></div>
</template>

3.注意vue-aplayer是APlayer的扩展，但是目前不兼容vue3。