An HTML5 Audio Player MP3 / OGG jQuery Plugin | mb.miniAudioPlayer

jquery.mb.miniPlayer is a plugin GUI app for jquery.jPlayer realized by © Happyworm LTD. audio player is a jQuery plugin that turns an audio link into a customizable HTML5 audio player and a simple on-page theme.

More advantages:

  • Flash player precautions on old browsers.
  • 5 pre-made skins or create your own themes.
  • Auto power on and off automatically when dimmed.
  • infinite loop.
  • Show/hide controls as per your needs.
  • Easy to download audio files with one click.

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}" 
   Audio Title

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

  // you can also pass options here

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


  // 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.

  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

// pause

// toggle

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

// getter

// 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, AudioPlayer Plugin/Github

See Demo And Download

Official Website(pupunzi): Click Here

This superior jQuery/javascript plugin is developed by pupunzi. For extra Advanced Usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Leave a Reply

Your email address will not be published. Required fields are marked *