Vue使用音频播放器插件 vue-aplayer

1. 安装 vue-aplayer
   npm install vue-aplayer --save

我们需要在main.js里面导入并引用

import vueAplayer from 'vue-aplayer'

Vue.use(vueAplayer)

2. 引入、注册
3. 在使用的vue文件里面引入他
4. import aplayer from "vue-aplayer"; components: { aplayer },
   

3.使用

<!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
<aplayer :music="musics[0]" :list="musics"  :showlrc="true"></aplayer>

4。data数据

data() {
   return {
     detailForm: {
       clickType: "",
       title: "ajlgaljg",
     },
     // 音频列表
     musics: [
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       },
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       }
     ],
   };
 },