DEV Community

loading...
Cover image for A Light Music Player For Your Audio Projects

A Light Music Player For Your Audio Projects

xinnks profile image James Sinkala ・1 min read

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.

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

pic
Editor guide