xns-audio-player-simple

A simple yet powerful music player for vuejs based on xns-audio-player

Demo

install

$ npm i xns-audio-player-simple

Import & initiate plugin on your entry js file

import XnsAudioPlayerSimple from 'xns-audio-player-simple'

Vue.use(XnsAudioPlayerSimple)

Example

<xns-audio-player-simple :playlist="songs"></xns-audio-player-simple>

export default {
  data () {
    return {
      songs: [
        { audio: 'audio.mp3', artist: 'Superstar', tittle: 'Funky Disco House', album: 'Alpha Zulu', cover: 'cover-art.jpg' }, ...
      ]
    }
  }
}

Options

Option	Type	Required	Default
playerWidth	Number	false	0 (100%)
playlist	Array	true	[]
repeatAll	Boolean	false	true
playerVolume	Number	false	0.5
stopPlayback	Boolean	false	false
pausePlayback	Boolean	false	false
showAudioDuration	Boolean	false	true
showAudioData	Boolean	false	true
progressBarColor	String (HEX color)	false	'#008080'

Options Details

playerWidth : Lets you set the width of the player in pixels, when set to zero (the default width) the player's width adjusts to 100% of the parent's width.

playlist : Pass audio list as an array.

repeatAll : Enable repetition of all audio files in the playlist

playerVolume : Lets you set the player's volume programatically, from 0 to 1.

stopPlayback : Lets you programatically stop audio playback.

pausePlayback : Lets you programatically pause audio playback.

showAudioDuration : Let's the player show the total duration of the audio file. (This is true for playerWidth >= 400px)

showAudioData : Let's the player show the audio data, specifically artist & title (This is true for playerWidth >= 600px)

progressBarColor : Let's you choose colors for the progress bar from the following array of colors

['#008080', '#009688', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#00bcd4', '#4caf50', '#ff9800', '#607d8b', '#795548']

Player Default Width

Player Width = 450

Player Max Width (1366)

Events

PlayerStatus Returns a string describing the status that the player is in, whether 'playing', 'paused' or 'stopped'

PlaybackTimer Returns an obect containing playing item's duration and current position in seconds:

{
    playingItemDuration: *Number*,
    playingItemTime: *Number*
}

Important Note:

To avoid playback and player seek issues you should make sure that where your audio files are served from are done so as a stream. More Here