Skip to main content

Setup

In order to set up the audio player, you need to include the audio player script below in your page’s HTML.

<script src=”https://vp.gjirafa.net/vps/vpaudioplayer/templates/v0.9/vp-audio-player.js”></script>

In order to initiate the player you need to create a new instance of the vpAudioPlayer object, as well as assign the required parameters. The audio player accepts a configuration parameter and the Id of the div where the player will be inserted.

<div id="audio-player"></div>
// The only required config is the audio file

let config = {
  audio: {
    file: '{.mp3}',
  },
};

// If you want to add a custom config, it should look something like this

let defaultConfig = {
  audio: {
    audioId: '',
    file: '',
    thumbnail: '',
    title: '',
    description: '',
    additionalDesc: '',
    playlist: {
      state: false,
      includeInitialAudio: false,
      playlistId: '',
      audios: [],
    },
  },
  config: {
    displayInfo: false,
    collapsible: false,
    backgroundColor: '',
    borders: {
      generalColor: 'black',
      generalWidth: '0px',
      top: {
        width: '',
        color: '',
      },
      bottom: {
        width: '',
        color: '',
      },
      left: {
        width: '',
        color: '',
      },
      right: {
        width: '',
        color: '',
      },
    },
    controls: {
      generalColor: 'black',
      playbackButton: {
        color: '',
      },
      volumeButton: {
        color: '',
      },
      skipButtons: {
        color: '',
        timeToSkip: 15,
      },
      timeInfo: {
        color: '',
      },
      playbackSpeed: {
        color: '',
      },
      slider: {
        barColor: '',
        progressBarColor: '',
        draggerColor: '',
      },
    },
  },
};
// These are all the configurable options

// This is how you initiate the audio player instance

vpAudioPlayer('audio-player').setup(config);