Socket
Socket
Sign inDemoInstall

xns-audio-player-simple

Package Overview
Dependencies
2
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    xns-audio-player-simple

a simple yet powerful music player for vuejs based on xns-audio-player


Version published
Maintainers
1
Install size
3.39 MB
Created

Readme

Source

xns-audio-player-simple

A simple yet powerful music player for vuejs based on xns-audio-player

xns-audio-player-simple

install

$ npm i xns-audio-player-simple

Import & initiate plugin on your entry js file

import XnsAudioPlayerSimple from 'xns-audio-player-simple'

Vue.use(XnsAudioPlayerSimple)

Example

<xns-audio-player-simple :playlist="playlist"></xns-audio-player-simple>
export default {
  data () {
    return {
      songs: [
        { audio: 'audio.mp3', artist: 'Superstar', tittle: 'Funky Disco House', album: 'Alpha Zulu', cover: 'cover-art.jpg' }, ...
      ]
    }
  }
}

Options

OptionTypeRequiredDefault
playerWidthNumberfalse320 (1366 max)
playlistArraytrue[]
repeatAllBooleanfalsetrue
playerVolumeNumberfalse0.5
stopPlaybackBooleanfalsefalse
pausePlaybackBooleanfalsefalse
showAudioDurationBooleanfalsetrue
showAudioDataBooleanfalsetrue
progressBarColorString (HEX color)false'#008080'

Options Details

playerWidth : Lets you set the width of the player in pixels, 320 <= playerWidth <= 1366.

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

['#008080', '#009688', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#00bcd4', '#4caf50', '#ff9800', '#607d8b', '#795548']

Player Default Width

xns-audio-player-simple

Player Width = 450

xns-audio-player-simple

Player Max Width (1366)

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:

{
	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

Keywords

FAQs

Last updated on 28 Mar 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc