Vue-APlayer Vue 2.x component of APlayer, create music players with controls

vue-aplayer

This component is a wrapper for APlayer, made with Vue 2. You can simply import it in your project and pass the options you want to, in your component or data.

Props

  • narrow: narrow style
  • autoplay: autoplay song(s), not supported by mobile browsers
  • mutex: pause other players when this player playing
  • theme: '#b7daff' theme color
  • mode:play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop)
  • preload:the way to load music, can be 'none' 'metadata' or 'auto'
  • listmaxheight:max height of play list
  • music: music info

Usage

Template

   <div id="myApp">
    <a-player autoplay :music="songs" ref="player"></a-player>
   </div>

script

import VueAplayer from 'vue-aplayer'

export default {
  data() {
  return {
      songs: [
          {
            title: 'Preparation',
            author: 'Hans Zimmer/Richard Harvey',
            url: 'http://devtest.qiniudn.com/Preparation.mp3',
            pic: 'http://devtest.qiniudn.com/Preparation.jpg',
            lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
          }
      ]
    }
  },
  components: { 'a-player': VueAplayer},
}

Check the Demo or give it a star on GitHub.