A simple and easy to use music player in Jquery.
- Can be integrated on any site that supports custom Javascript.
- Choose between two built in themes (dark or light).
- Display song title, artist and cover image (requires jsmediatags) (disabled by default)
- Skip, Repeat or Shuffle as you please.
- Use Font Awesome icons for the buttons (disabled by default)
- JQuery (duh)
- Link the source files within your html <head> tags:
<link rel="stylesheet" href="css/jqmusic.min.css" type="text/css"/>
<script src="js/config.js"></script>
<script src="js/jqmusic.min.js"></script>- Include the load tag on the part of the page where you want to load the music player.
<div id="jqmusic"></div>-
Create a folder and add your chosen audio files. Supported types are .mp3 and .ogg
-
Configure options.
Inside the config.js file is where you'd configure your options.
Choose whether or not you want to use Font Awesome icons for the control buttons: This requires that Font Awesome is loaded on your page.
var usefa = true;The ID or class of the element where the music player will be loaded:
var loadto = "#jqmusic";Define where the script will look for audio files:
var tracklocation = "tracks/";Choose whether or not to display the artist, title and cover image (if available):
var displaymeta = false;NOTE: If you set this to true, you also need to include JSMediaTags within your <head> tags like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.7.0/jsmediatags.min.js"></script>Choose which theme to use: The options are "dark", "light" or "custom". "custom" means that no css will be applied to the player. So you can fully customize it yourself.
var theme = "dark";The configuration example above should give you something like this.
Why does artist or title show "Unknown"?
- That happens if there is no title or artist within the audio track's meta tags.
Why does artist and title show "N/A"?
- This is short for "Not Available" and happens if the script failed to find anything within the audio track's meta tags. This is a problem with the jsmediatags library and is unfortunately beyond my control.