Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xinnks/xns-audio-player-simple
xns-audio-player vue plugin with a simple ui
https://github.com/xinnks/xns-audio-player-simple
audio audio-files audio-player hacktoberfest music-player playlist vuejs xns-audio-player
Last synced: 2 months ago
JSON representation
xns-audio-player vue plugin with a simple ui
- Host: GitHub
- URL: https://github.com/xinnks/xns-audio-player-simple
- Owner: xinnks
- License: mit
- Created: 2019-10-02T22:49:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T18:11:17.000Z (9 months ago)
- Last Synced: 2024-01-24T13:32:42.464Z (5 months ago)
- Topics: audio, audio-files, audio-player, hacktoberfest, music-player, playlist, vuejs, xns-audio-player
- Language: Vue
- Homepage: https://xaps.jamesinkala.com
- Size: 824 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement. (Components & Libraries / UI Components)
- awesome-vue - xns-audio-player-simple - xns-audio-player vue plugin with a simple ui ` 📝 5 months ago` (UI Components [🔝](#readme))
README
# xns-audio-player-simple
A simple yet powerful music player for VueJs inspired by [xns-audio-player](https://github.com/xinnks/xns-audio-player "xns-audio-player")## [Demo](https://xaps.jamesinkala.com "xns-audio-player-simple demo")
![xns-audio-player-simple](https://res.cloudinary.com/djx5h4cjt/image/upload/v1581286605/xns-audio-player-simple/xns-audio-player-simple-2.0.0.gif "xns-audio-player-simple")
[![](https://badgen.net/npm/v/xns-audio-player-simple)](https://badgen.net/npm/v/xns-audio-player-simple) [![](https://badgen.net/npm/license/xns-audio-player-simple)](https://badgen.net/npm/license/xns-audio-player-simple) [![](https://badgen.net/packagephobia/publish/xns-audio-player-simple)](https://badgen.net/packagephobia/publish/xns-audio-player-simple) [![](https://badgen.net/bundlephobia/minzip/xns-audio-player-simple)](https://badgen.net/bundlephobia/minzip/xns-audio-player-simple)
## Vue 2 Support
- Docs - [README](https://github.com/xinnks/xns-audio-player-simple/tree/87b89c3ad99e974d727f5639ad505a146e047c1d#readme)
- Last npm version - [[email protected]](https://www.npmjs.com/package/xns-audio-player-simple/v/2.1.0)## Vue 3 Support
**install**
```sh
$ npm i xns-audio-player-simple
```**Import & initiate plugin on your entry js file**
```sh
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**
```sh
import { XnsAudioPlayerSimple } from "xns-audio-player-simple";
import "xns-audio-player-simple/styles.css";export default {
components: { XnsAudioPlayerSimple },
data(){
return {
playlist: [...]
}
}
}```
**Import plugin inside a Vue SFC with the script-setup sugar**
```sh
import XnsAudioPlayerSimple from 'xns-audio-player-simple';
import "xns-audio-player-simple/styles.css";
import { ref } from "vue";
const playlist = ref([...]);```
**On the template**
```sh
```
**Supported song Object properties**
| Property | Type | Required |
| ------ | ---- | -------- |
| audio | String | true |
| artist | String | true |
| tittle | String | true |
| album | String | true |
| cover | String | true |**Example**
```sh
export default {
data () {
return {
playlist: [
{ audio: 'audio.mp3', artist: 'Superstar', tittle: 'Funky Disco House', album: 'Alpha Zulu', cover: 'cover-art.jpg' }, ...
]
}
}
}
```## Options
| Option | Type | Required | Default |
| ------ | ---- | -------- | ------- |
| playerWidth | Number | false | 0 (100%) |
| playlist | Array | true | [] |
| repeatAll | Boolean | false | true |
| playerVolume | Number | false | 0.5 |
| stopPlayback | Boolean | false | false |
| pausePlayback | Boolean | false | false |
| showAudioDuration | Boolean | false | true |
| showAudioData | Boolean | false | true |
| progressBarColor | String (HEX color) | false | '#008080' |### Options Details
__playerWidth__ : Lets you set the width of the player in pixels, when set to zero (the default value) the player's width adjusts to fit the content space width as prescribed by the parent.
__playlist__ : Pass audio list as an array.
__repeatAll__ : Enable repetition of all audio files in the playlist
__playerVolume__ : Lets you set the player's volume programatically, from 0 to 1.
__stopPlayback__ : Lets you programatically stop audio playback.
__pausePlayback__ : Lets you programatically pause audio playback.
__showAudioDuration__ : Let's the player show the total duration of the audio file. (This is true for __playerWidth__ >= 400px)
__showAudioData__ : Let's the player show the audio data, specifically artist & title (This is true for __playerWidth__ >= 600px)
__progressBarColor__ : Let's you choose colors for the progress bar from the following array of colors
```sh
['#008080', '#009688', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#00bcd4', '#4caf50', '#ff9800', '#607d8b', '#795548']
```### Player Width = 320px ###
![xns-audio-player-simple](https://res.cloudinary.com/djx5h4cjt/image/upload/v1581211589/xns-audio-player-simple/small-player.gif "xns-audio-player-simple")### Player Width = 1300px ###
![xns-audio-player-simple](https://res.cloudinary.com/djx5h4cjt/image/upload/v1581211588/xns-audio-player-simple/large-player.gif "xns-audio-player-simple")## Events
__PlayerStatus__
Returns a string describing the status that the player is in, whether 'playing', 'paused' or 'stopped'__PlaybackTimer__
Returns an obect containing playing item's duration and current position in seconds:
```sh
{
playingItemDuration: *Number*,
playingItemTime: *Number*
}
```### Important Note: ###
To avoid playback and player seek issues you should make sure that where your audio files are served from are done so as a stream. [More Here](http://pervasivecode.blogspot.com/2012/09/currenttime-not-working-with-html5.html)
[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/Xinnks)