DEV Community

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

Posted on • Edited on • Originally published at jamesinkala.com

9 1

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 inspired by xns-audio-player

xns-audio-player-simple

Vue 2 Support

Vue 3 Support

install

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

Import & initiate plugin on your entry js file

import { createApp } from "vue";
import App from "./App.vue";
import XnsAudioPlayerSimple from "xns-audio-player-simple";
import "xns-audio-player-simple/styles.css"

const app = createApp(App);
app.use(XnsAudioPlayerSimple);
app.mount("#app");
Enter fullscreen mode Exit fullscreen mode

Import plugin inside a Vue SFC

<script>
import { XnsAudioPlayerSimple } from "xns-audio-player-simple";
import "xns-audio-player-simple/styles.css";

export default {
  components: { XnsAudioPlayerSimple },
  data(){
    return {
      playlist: [...]
    }
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Import plugin inside a Vue SFC with the script-setup sugar

<script setup>
import XnsAudioPlayerSimple from 'xns-audio-player-simple';
import "xns-audio-player-simple/styles.css";
import
Enter fullscreen mode Exit fullscreen mode

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)