Customizable HTML5 Audio Player - jQuery mb.miniAudioPlayer

A jQuery plugin that transforms an audio link into a customizable, skinnable, minimal-looking HTML5 audio player on the page.

More Features:

• Fallbacks to a flash player on legacy browsers.
• 5 pre-built skins or create your own themes.
• Autoplay and auto pause on blur.
• Infinite loop.
• Show/hide controls as per your needs.
• Easy to download audio files with a single click.

How to use it:

1. Load the jQuery mb.miniAudioPlayer plugin's files in the document.

<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 page and config the audio player by passing the options object to the class attribute as follows:

<a id="example" 
   class="audio {loop:true, inLine:false, downloadable:true}" 
   href="https://www.jqueryscript.net/dummy/1.mp3">
   Audio Title
</a>

3. Initialize the plugin on the audio link and we're done.

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

4. All possible plugin options to customize the audio player.

$(".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 functions.

$(".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 methods to control the audio player 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 own 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.map_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
}

---

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.