• 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