How to make use of it:

1. Load the jQuery mb.miniAudioPlayer plugin’s information within the doc.

<link rel="stylesheet" href="/path/to/dist/css/jQuery.mb.miniAudioPlayer.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.mb.miniAudioPlayer.min.js"></script>

2. Create an audio link on the web page and config the audio participant bypassing the choices object to the class attribute as follows:

<a id="example" 
   class="audio {loop:true, inLine:false, downloadable:true}" 
   href="">
   Audio Title
</a>

3. Initialize the plugin on the audio link and we’re completed.

$(".audio").mb_miniPlayer({
  // you can also pass options here
});

4. All doable plugin choices to customize the audio participant.

$(".audio").mb_miniPlayer({

  // path to ogg file
  ogg: null,

  // path to m4a file
  m4a: null,

  // width of the audio player
  width: 150,

  // skins: black, blue, orange, red, gray
  skin: "black",

  // volume
  volume: .5,

  // autoplay
  autoplay: false,

  // enable animation
  animate: true,

  // enable ID3
  id3: false,

  // play alone or not
  playAlone: true,

  // infinite loop or not
  loop: false,

  // enable inline player
  inLine: false,

  // initial volume levels
  volumeLevels: 12,

  // allow to mute the audio
  allowMute: true,

  // show player controls
  showControls: true,
  showVolumeLevel: true,
  showTime: true,
  showRew: true,

  // add a shadow to the player
  addShadow: false,

  // add a gradient overlay to the player
  addGradientOverlay: false,

  // allows to track with Google Analytics
  gaTrack: true,

  // is the audio downloadable
  downloadable : false,

  // allow to download on mobile
  allowDownloadOnMobile: false,

  // downloadable security
  downloadablesecurity : false,

  // custom download page
  downloadPage         : null,

  // path to the Flash player
  swfPath: "swf/",

  // pause on window blur
  pauseOnWindowBlur: false,

});

5. Callback features.

$(".audio").mb_miniPlayer({
  onReady: function (player, $controlsBox) {},
  onPlay: function (player) {},
  onEnd: function (player) {},
  onPause: function (player) {},
  onMute: function (player) {},
  onDownload: function (player) {}
});

6. Available API strategies to manage the audio participant programmatically.

// play
$('#example').mb_miniPlayer_play()

// pause
$('#example').mb_miniPlayer_stop();

// toggle
$('#example').mb_miniPlayer_toggle();

// change audio file
$('#example').mb_miniPlayer_changeFile(media, title);

// getter
$('#example').mb_miniPlayer_getPlayer();
$('#example').mb_miniPlayer_getMaster();

// destroy
$('#example').mb_miniPlayer_destroy();

7. Create your individual themes.

.mbMiniPlayer.mySkin .playerTable {
  background-color: transparent;
  border-radius: 5px !important;
}

.mbMiniPlayer.mySkin .playerTable span {
  background-color: #000;
  padding: 3px !important;
  font-size: 20px;
}

.mbMiniPlayer.mySkin .playerTable span_time {
  font-size: 12px !important;
  width: 50px !important
}

.mbMiniPlayer.mySkin .playerTable span.map_title {
  padding: 4px !important
}

.mbMiniPlayer.mySkin .playerTable span.map_play {
  border-left: 1px solid rgb(0, 0, 0);
  border-radius: 0 4px 4px 0 !important;
}

.mbMiniPlayer.mySkin .playerTable span.map_volume {
  padding-left: 6px !important
}

.mbMiniPlayer.mySkin .playerTable span.map_volume {
  border-right: 1px solid rgb(26, 26, 26);
  border-radius: 4px 0 0 4px !important;
}

.mbMiniPlayer.mySkin .playerTable span.map_volume.mute {
  color: rgba(255, 255, 255, 0.4);
}

.mbMiniPlayer.mySkin .map_download {
  color: rgba(0, 0, 0, 0.4);
}

.mbMiniPlayer.mySkin .map_download:hover {
  color: rgb(0, 0, 0);
}

.mbMiniPlayer.mySkin .playerTable span {
  color: #fff;
  text-shadow: none!important;
}

.mbMiniPlayer.mySkin .playerTable span {
  color: #fff;
}

.mbMiniPlayer.mySkin .playerTable {
  border: 1px solid rgb(242, 242, 242) !important;
}

.mbMiniPlayer.mySkin .playerTable span.map_title {
  color: #000;
  text-shadow: none!important
}

.mbMiniPlayer.mySkin .playerTable .jp-load-bar {
  background-color: rgba(0, 0, 0, 0.3);
}

.mbMiniPlayer.mySkin .playerTable .jp-play-bar {
  background-color: #000;
}

.mbMiniPlayer.mySkin .playerTable div.map_controlsBar {
  background-image: none;
  background-color: #fff;
}

.mbMiniPlayer.mySkin .playerTable span.map_title {
  color: #000;
}

.mbMiniPlayer.mySkin .playerTable span.map_volumeLevel a {
  background-color: rgb(255, 255, 255);
  height: 80%!important
}

.mbMiniPlayer.mySkin .playerTable span.map_volumeLevel a.sel {
  background-color: #fff;
}

.mbMiniPlayer.mySkin span.map_download {
  font-size: 50px !important;
}

/* WordPress playlist select */
.map_pl_container .pl_item.sel {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: #999
}

Customizable HTML5 Audio Player, mb.mini AudioPlayer Plugin/Github

See Demo And Download