vue2.x使用音频插件vue-aplayer

前言：

　　引入依赖

npm install vue-aplayer --save
npm install hls.js --save

正文：

HTML部分：

<template>
  <aplayer :music="musics[0]" :list="musics" :showlrc="true"   />
</template>

JS部分：

<script>
import aplayer from 'vue-aplayer'
// 测试 导入项目音频资源路径
import a from '../../assets/文爱.mp3';

export default {
  components:{
    aplayer
  },
  data(){
    return{
      musics:[
        {title:"标题",artist:"演唱者",url:http音频路径,pic:"封面图片路径",lrc:"歌词"},
        {title:"文爱2",artist:"演唱者",url:a,},
        {title:"文爱3",artist:"演唱者",url:a,},
        {title:"文爱4",artist:"演唱者",url:a,},
      ]
    }
  },

}
</script>

属性：

属性名称

类型

默认值

描述说明

music

Object

必填选项

当前播放的音乐。

名称	默认值	描述说明
src	必填	音频文件的路径
title	'Untitles'	歌曲名称
artlist	'Untitles'	演唱者
pic	none	封面图片路径
lrc	none	歌词或歌词文件路径
theme	none	歌曲的主题色，会覆盖播放器的主题色

 

list

Array

[]

播放列表，非空播放列表会展示出来

mini

Boolean

false

迷你模式

float

Boolean

false

浮动模式，允许在页面随意拖动播放器

showLrc

Boolean

false

是否显示歌词

mutex

Boolean

true

是否在该播放器播放时，暂停其他播放器

theme

String

'#41b883'

主题色

shuffle

Boolean

false

随机播放

repeat

String

'no-repeat'

轮播模式。其他值：

repeat-one : 单曲循环

repeat-all : 列表循环

no-repeat : 不循环

listMaxHeight

String

none

播放列表最大高度

listFolder

Boolean

false

默认收起播放列表

事件：

事件明	参数	描述说明
pLay	none	开始播放时触发
pause	none	暂停时触发
canplay	none	当数据支持时触发
playing	none	播放时定时触发
ended	none	停止播放时触发
erroe	none	出现错误时触发
update:mode	none	mode属性更改时触发