你可能会问,已经有一个叫Vue-APlayer的项目了,你为什么要重复造轮子?
大哥 你不看看这个项目最后更新是什么时候?????
这项目三年以前就停止更新了,一堆Aplayer的原生功能在Vue-APlayer中是Beta版,这下全胎死腹中了。关键要命的是它只支持Vue2,对Vue3兼容死差。哦不对这个项目开发时根本没有Vue 3

废话讲完了,教程开始
首先,安装引入APlayer

npm install aplayer --save
或者
yarn add aplayer 
又或者
pnpm install aplayer

引入这里有个大坑 那就是官方文档写错了 官方css路径写错了,正确写法应该是:

import 'aplayer/dist/APlayer.min.css'; //目录是小写aplayer!!!!!!!
import APlayer from 'APlayer';

是不是觉得挺绕的,为什么我安装的是aplayer,这里却引入的是APlayer,大小写不同?
没办法 我也纳闷.... 也许是官方的屎山代码吧。

然后又是个大坑:
在Vue3中,有了一个新的Hook叫onMounted,但是你把Aplayer放在onMounted初始化不会报错,但是啥都不会显示。
这是因为onMounted这个hook好像访问不到模板或者是页面数据
那么怎么办呢? 那当然是放在mounted()方法中,但是要方法调用:

let ap;
export default defineComponent({
  mounted() {
    this.initAPlayer();
  },
methods:{
    initAPlayer() {
      ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        autoplay:true,
        audio: [
               {
    "name": "ウミユリ海底譚 ",
    "artist": "星乃一歌&望月穂波&初音ミク",
    "url": "https://src.yuxiangwang0525.com/overlay/pjsk2.mp3",
    "cover": "https://src.yuxiangwang0525.com/overlay/pjskpicture.jpg"
  },
]
      });
    },
  },
})

好了 教程就这么多 跑路去搞Hadoop去了