vue-aplayer：一个基于vue2.x易于配置的音乐播放器控制组件

梦里梦外; 2021-09-18 15:50 1010阅读 0赞

## **vue-aplayer** ##

一个基于vue2.x易于配置的音乐播放器控制组件

> 这个组件是aplayer基于vue的实现，并不断的更新完善，而不仅仅只是一层封装

## **介绍** ##

[demo][]

截图  
![2868619539-5a6e80d5b5514_articlex][]

## **安装** ##

$ npm install vue-aplayer --save

## **使用** ##

// ES6
      import Aplayer from 'vue-aplayer'
        
      new Vue({
          components: {
              Aplayer
          }
      })

## **属性** ##

这些属性大部分跟Aplayer的选项一样

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>narrow</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>紧凑样式</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>String</td> 
   <td>null</td> 
   <td>是否自动播放，为null表示不会自动播放</td> 
  </tr> 
  <tr> 
   <td>showlrc</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示歌词</td> 
  </tr> 
  <tr> 
   <td>mutex</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>当一首音乐正在播放时，暂停其他音乐</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>String</td> 
   <td>'#b7daff'（浅蓝色）</td> 
   <td>主题颜色</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>'circulation'</td> 
   <td>播放模式，random:随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放（列表播放完即停止）</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>String</td> 
   <td>'auto'</td> 
   <td>音乐加载方式，none,metadata,auto</td> 
  </tr> 
  <tr> 
   <td>listmaxheight</td> 
   <td>String</td> 
   <td>none</td> 
   <td>播放列表的最大高度</td> 
  </tr> 
  <tr> 
   <td>music</td> 
   <td>String</td> 
   <td>Object or Array</td> 
   <td>歌曲信息，详情见下方<strong>“歌曲信息”</strong> </td> 
  </tr> 
 </tbody> 
</table>

## **歌曲信息** ##

属性music既可以是包含歌曲信息的对象类型，也可以是包含这些对象的数组类型

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>'Untitled'</td> 
   <td>歌曲名</td> 
  </tr> 
  <tr> 
   <td>author</td> 
   <td>'Unknown'</td> 
   <td>歌手</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>required</td> 
   <td>歌曲地址</td> 
  </tr> 
  <tr> 
   <td>pic</td> 
   <td>none</td> 
   <td>歌曲海报</td> 
  </tr> 
  <tr> 
   <td>lrc</td> 
   <td>none</td> 
   <td>歌词或者歌词文件的地址</td> 
  </tr> 
 </tbody> 
</table>

## **事件** ##

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>play</td> 
   <td>none</td> 
   <td>开始播放时触发</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>none</td> 
   <td>暂停时触发</td> 
  </tr> 
  <tr> 
   <td>canplay</td> 
   <td>none</td> 
   <td>当数据支持播放时触发</td> 
  </tr> 
  <tr> 
   <td>playing</td> 
   <td>none</td> 
   <td>播放时会定时触发</td> 
  </tr> 
  <tr> 
   <td>ended</td> 
   <td>none</td> 
   <td>停止播放时触发</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>none</td> 
   <td>错误出现时触发</td> 
  </tr> 
  <tr> 
   <td>update:mode</td> 
   <td>none</td> 
   <td>见上面的mode属性</td> 
  </tr> 
 </tbody> 
</table>

[demo]: https://vue-aplayer.js.org/
[2868619539-5a6e80d5b5514_articlex]: /images/20210726/915da2251ad044ff9a9191817c4e61fe.png