NF Audio

An audio player plugin focused on music.

Usage

1. Include the stylesheet, script, and target div

<link rel="stylesheet" href="nf-audio-player.css">
<script src="nf-audio-player.js"></script>
<div class="nf-audio-target"></div>

2. Add The configuration

window.nf_audio_player({
		target:".nf-audio-target",
		theme: "nf-audio-default",
		autoNext:true,
		tracks:[
          {
          	name:"some track 1",
          	src:"https://nickfreese.com/public/assets/nf-audio/track-1.mp3"
          },
          {
          	name:"some track 2",
          	src:"https://nickfreese.com/public/assets/nf-audio/track-1.mp3"
          }
		]
});

Config parameters

target - query selector for the target element

theme - CSS theme, nf-audio-default and nf-audio-dark are included in the stylesheet

autoNext - Bool, whether or not the audio player should automatically go the next track.

tracks - A list of object each with a src containing the url of the source file, and name containing the name of the track

TEMPLATES - an object with 2 possible keys main and track where you can add replacement template strings to customize the layout of audio player elements. See second example in the example file Proceed with caution.

Theming

Themes are defined by creating a parent class that sets several variables. below are the default variables

      --main-control-color: #4c4c55;
      --main-control-color-filter: invert(27%) sepia(13%) saturate(338%) hue-rotate(202deg) brightness(96%) contrast(86%);
      --main-control-hover-light: #fdfdfdf7;
      --slider-control-hover-light: #fdfdfdf7;
      --main-control-border-color: 1px solid #d5d5d9;
      --main-slider-progress-border-color: 1px solid #34343c;
      --main-slider-bg-color: #f3f3f3;
      --main-font:monospace;
      --main-text-color:#333;