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

vue-aplayer中文文档：入门 | vue-aplayer
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. 使用组件

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

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

 如果用的是Vue@2.3.0+，可以在 music shuffle 和 repeat 上使用.sync修饰符

音乐信息属性：

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