Audio Player


Audio Player
Version1.07
Download5
Stock
File Size675.39 KB
Create DateOctober 28, 2017
Download

Easy to use MP3 player with various skins & download file options. Requires MP3 and OGG audio files. Uses a JSON file to load the tracks. Comes with a variety of pre-set themes. Or make your own! Simply include the download JS & CSS files and enter your HTML code. Full demo included in download.

• Add an unlimited number of audio tracks.
• Customize the theme using one of the various preset skins.
• Create your own theme using a stylizer.
• Option to enable download of either individual tracks or download entire album.

JSON:

[{
	"album": "The Corner ",
	"title": "Full Circle",
	"artist": "Kill Emil",
	"year": "2012",
	"length": "00:38",
	"image": "audio/files/the_corner.jpg",
	"mp3": "audio/files/Full_Circle.mp3",
	"ogg": "audio/files/Full_Circle.ogg"
}, {
	"album": "The Corner ",
	"title": "See you soon",
	"artist": "Kill Emil",
	"year": "2012",
	"length": "00:51",
	"image": "audio/files/the_corner.jpg",
	"mp3": "audio/files/See_you_soon.mp3",
	"ogg": "audio/files/See_you_soon.ogg"
}]
CODE:

* Style of Player
class="audio-player" or class="audio-player mini"
  
* Show Playlist
data-playlist="on" 

* Show Track Details
data-details="on" 

* Audo Play
data-autoplay="on" 

* Continous Play
data-contplay="on"

* JSON file to load
data-json="audio.json"

* VISUALIZER
data-visualizer="on" 

* VISUALIZER Cap Color
data-capcolor="#fff" 

* VISUALIZER Gradient
data-topcolor="#0066bf" 
data-centercolor="#5b90bf" 
data-bottomcolor="#a8b4bf"
EXAMPLES:

  <div id="player123" class="audio-player" 
  data-playlist="on" 
  data-details="on" 
  data-autoplay="on" 
  data-contplay="on" 
  data-visualizer="on" 
  data-capcolor="#fff" 
  data-topcolor="#0066bf" 
  data-centercolor="#5b90bf" 
  data-bottomcolor="#a8b4bf" 
  data-json="audio.json">
  
<div id="player123" class="audio-player mini" 
  data-playlist="off" 
  data-details="off" 
  data-autoplay="on" 
  data-contplay="on" 
  data-visualizer="on" 
  data-capcolor="#fff" 
  data-topcolor="#0066bf" 
  data-centercolor="#5b90bf" 
  data-bottomcolor="#a8b4bf" 
  data-json="audio.json">