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.
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
Vue 2 Support
- Docs - README
- Last npm version - xns-audio-player-simple@2.1.0
Vue 3 Support
install
$ npm i xns-audio-player-simple
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");
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>
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
…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
Top comments (0)