jQuery MP3 Music Player Plugin – MINImusic-Player

In this post I am going to share Free and Open-Source Jquery music player Plugin. MINImusic Player is an easy-to-use jQuery plugin which helps you create a highly customizable audio/mp3 player on the html page.
default musicplayer
Features:
The following features are available.

  • Playlist support;
  • Ability to Customise the Controllers – to show/hide & reorder ;
  • Callbacks for almost every single function;
  • Autoplay and loop support
  • Supports Multiple Instance on the Same Page.



Libraries

The plugin dependent on jQuery library so include it first after that add plugin’s library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="dist/musicplayer-min.js"></script>

HTML

Create the playlist and other music player details.

<div class="demo">
  <ul class="playlist">
 
    <li data-cover="cover-1.jpg" data-artist="Artist-1">
      <a href="1.mp3">Music 1</a>
    </li>
 
    <li data-cover="cover-2.jpg" data-artist="Artist-2">
      <a href="2.mp3">Music 2</a>
    </li>
 
    <li data-cover="cover-3.jpg" data-artist="Artist-3">
      <a href="3.mp3">Music 1</a>
    </li>
 
    ...
 
  </ul>
</div>



JS

Call the plugin:

$(function() {   
  $("#demo").musicPlayer();
});

Here list of properties you can use to customize the plugins.

$(".demo").musicPlayer({
  autoPlay: false , 
  volume: 80, 
  loop: false, 
  timeSeparator: ' / ',
  playerAbovePlaylist: true,  
  infoElements: ['title' , 'artist'] , 
  elements: ['artwork', 'information', 'controls', 'progress', 'time', 'volume'],  
  timeElements: ['current', 'duration'],  
  controlElements: ['backward', 'play', 'forward', 'stop'], 
});

MINImusic-Player provides some useful events that you can subscribe to when implementing your music player.

onPlay
fires when the Music starts to play.

onPause
fires when the Music is paused.

onStop
fires when the Music is stopped.

onFwd
fires when the Music has been Forwarded by the user.

onRew
fires when the Music has been Rewind by the user.

volumeChanged
fires when the Music volume is altered by the user.

seeked
fires when the Music has been seeked by the user.

trackClicked
fires when a playlist track is clicked by the user.

onMute
fires when the Music volume is muted by the user.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by codovate. Visit their official github repository for more information and follow for future updates.