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

A Light Music Player For Your Audio Projects

#webdev #vue #audio #javascript

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

Demo

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
View on GitHub

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

Top comments (0)

Read next

amenibensaada profile image

A Beginner’s Guide to Building Dynamic User Interfaces with React

Ameni Ben Saada -

abhay_yt_52a8e72b213be229 profile image

Mastering JavaScript Objects: The Backbone of Dynamic Programming

Abhay Singh Kathayat -

martygo profile image

🛑 Stop Create Hooks in React 🪝🎣

Martins Gouveia -

uchexm profile image

How to Optimize Loops for Better Performance

Uchechi Nwaka -