Vue - 音频播放器插件（vue-aplayer）

vue-aplayer中文文档：https://aplayer.netlify.app/docs/guide/
GitHub文档：https://github.com/SevenOutman/vue-aplayer/tree/master/docs

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

2. 引入、注册

   import aplayer from "vue-aplayer";  
   components: { 
   	aplayer 
   }
   

3. 使用组件

   
   <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",
          }
        ],
      };
    },
   

5. vue-aplayer 参数说明

   名称	类型	默认值	说明
   music	Object	必须	当前播放的音乐。具体请查看下方的音乐信息。
   list	Array	[]	播放列表。如果 list 不是空数组，播放列表就会显示出来，即使 list 中只有一首歌曲 并且它和 music 一样
   mini	Boolean	false	迷你模式
   float	Boolean	false	浮动模式。可以在页面上随意拖放播放器
   showLrc	Boolean	false	是否显示歌词
   mutex	Boolean	false	是否在该播放器播放时暂停其他播放器
   theme	Boolean	‘#41b883’	主题色。如果当前歌曲也设置 theme 则以歌曲的为准
   shuffle	Boolean	false	随机播放
   repeat	Boolean	‘no-repeat’	轮播模式。值可以是’repeat-one’（单曲循环）‘repeat-all’（循环列表）或者’no-repeat’（不循环）。
   listMaxHeight	Boolean	none	播放列表面板最大高度
   listFolded	Boolean	false	默认收起播放列表
   narrow			DEPRECATED，请使用mini
   listmaxheight			DEPRECATED，请使用listMaxHeight
   showlrc			DEPRECATED，请使用showLrc

   如果用的是[email protected]+，可以在 music shuffle 和 repeat 上使用.sync修饰符

   音乐信息属性：

   名称	默认值	说明
   src	必须	音频文件的URL
   title	‘Untitled’	歌曲名称
   artist	‘Untitled’	演唱者
   pic	none	封面图片URL
   lrc	none	歌词或者歌词文件的URL
   theme	none	歌曲的主题色，会覆盖播放器的主题色
   url		DEPRECATED,请使用src
   author		DEPRECATED,请使用artist