BlogHome
A Light Music Player For Your Audio Projects

A Light Music Player For Your Audio Projects

Nov 28, 2020

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.

xns-audio-player vue plugin with a simple ui

Using xns-audio-player-simple

Install plugin

$ npm i xns-audio-player-simple

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)
...

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
  }
]

Pass the array to the :playlist attribute

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

Then, enjoy playing music on your project.

xns-audio-player in action

xnsaudioplayersimple small width