vue-aplayer

前端 多媒体
配置简便的 Vue 2.x 音乐播放器组件
2019-10-11 我要评论 1 我要收藏

vue-aplayer npm

A Vue 2.x component of easy-to-config music players with controls.

Introduction

Demo

This component is a wrapper for APlayer.

Screenshot

image

Install

$ npm install vue-aplayer --save

Usage

<a-player autoplay :music="{
  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'
}"></a-player>
// ES6
import VueAplayer from 'vue-aplayer'

new Vue({
    components: {
        'a-player': VueAplayer
    }
})

Props

Props are mostly the same as Aplayer's options.

Name Type Default Description
narrow Boolean false narrow style
autoplay Boolean false autoplay song(s), not supported by mobile browsers
showlrc Number 0 show lrc, can be 0, 1, 2, see: With lrc
mutex Boolean false pause other players when this player playing
theme String '#b7daff' theme color
mode String 'circulation' play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop)
preload String 'auto' the way to load music, can be 'none' 'metadata' or 'auto'
listmaxheight String none max height of play list
music Object or Array required music info, see Music info

If music is a single Object, you can assign it to another Object and the player will play the new song.

Music info

The music props can either be an object containing info of the song to play, or an array of such objects.

Property Default Description
title 'Untitled' music title
author 'Unknown' music author
url required music url
pic none music cover picture
lrc none lrc or url to a .lrc file, see: With lrc

Events

Name Params Description
play none Triggered when APlayer start play
pause none Triggered when APlayer paused
canplay none Triggered when enough data is available that APlayer can play
playing none Triggered periodically when APlayer is playing
ended none Triggered when APlayer ended playing
error none Triggered when an error occurs

API

You are allowed to access the APlayer instance wrapped in the component via control property, so that you can use its APIs.

<a-player :music="songs" ref="player"></a-player>
// ES6
import VueAplayer from 'vue-aplayer'

new Vue({
    components: {
        'a-player': VueAplayer
    },
    data: {
        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'
            }
        ]
    },
    mounted() {
        let aplayer = this.$refs.player.control
        aplayer.play()
    }
})

LICENSE

The MIT License

vue-aplayer 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论