DEV Community

Cover image for A Light Music Player For Your Audio Projects
James Sinkala
James Sinkala

Posted on • Updated on

A Light Music Player For Your Audio Projects

If you are working on either a professional or a side project where you need audio playing functionalities, look no further, I created a vue plugin - xns-audio-player-simple just for that. It is as light (37.3 kb unpacked and 7.9 kb zipped) as it is easy to setup.

GitHub logo xinnks / xns-audio-player-simple

xns-audio-player vue plugin with a simple ui

xns-audio-player-simple

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

Demo

xns-audio-player-simple

install

$ npm i xns-audio-player-simple
Enter fullscreen mode Exit fullscreen mode

Import & initiate plugin on your entry js file

import XnsAudioPlayerSimple from 'xns-audio-player-simple'
Vue.use(XnsAudioPlayerSimple)
Enter fullscreen mode Exit fullscreen mode

Example

<xns-audio-player-simple :playlist="songs"></xns-audio-player-simple>
Enter fullscreen mode Exit fullscreen mode
export default {
  data () {
    return {
      songs: [
        { audio: 'audio.mp3', artist: 'Superstar', tittle: 'Funky Disco House', album: 'Alpha Zulu', cover: 'cover-art.jpg' }, ...
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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…

Using xns-audio-player-simple

Install plugin

$ npm i xns-audio-player-simple
Enter fullscreen mode Exit fullscreen mode

Import and initiate the plugin on your entry js file within your vue project

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

Vue.use(XnsAudioPlayerSimple)
...
Enter fullscreen mode Exit fullscreen mode

All you need to start playing audio files is an array of music objects with the following properties.

songs: [
  ...
  { 
    audio: 'audio.mp3', // String: audio file url
    artist: 'Superstar', // String: artist's name
    tittle: 'Funky Disco House', // String: audio/song's title
    album: 'Alpha Zulu', // String: audio/song's album title
    cover: 'cover-art.jpg' // String: audio/song's art
  }
]
Enter fullscreen mode Exit fullscreen mode

Pass the array to the :playlist attribute

<xns-audio-player-simple :playlist="songs"></xns-audio-player-simple>
Enter fullscreen mode Exit fullscreen mode

Then, enjoy playing music on your project.

xns-audio-player in action

xns-audio-player-simple small width

xns-audio-player-simple large width

Discussion (0)