Customizable HTML5 Mini Audio Player Plugins – mb.miniAudioPlayer

Other
Customizable HTML5 Audio Player - jQuery mb.miniAudioPlayer
File Size: 779.83 KB
Views Total: 745 views
Last Update:December 17, 2023
Publish Date: July 12, 2010
Official Website: Go to website
License: MIT
Plugin Author: pupunzi
Demo    Download

A Free jQuery Plugins with Customizable HTML5 Audio Player plugin can help transform an audio link into a stylish and customizable HTML5 audio player. This plugin can be used to create a minimalist-looking audio player that can be easily customized with skins, colors, and other settings to fit the aesthetic of any webpage. Using this plugin, you can easily add an audio player to your webpage without having to write complex HTML or CSS code.

Some plugins even offer features such as playlist support, cross-browser compatibility, and responsive design. Whether you want to create a simple audio player for your website or a more advanced player with additional features, a jQuery plugin can help simplify the process and provide a range of customization options to meet your needs.

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 used ?

Add jQuery, css and mb.miniAudioPlayer plugin’s files.

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

To create an audio link on a webpage and configure the audio player using a jQuery plugin, you can follow these steps:

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

Initialize the plugin on the audio link.

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

 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,

});

jQuery Callback functions.

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

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
}

Done

Thanks for make jQuery plugin is developed by pupunzi For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.7.7
  • 1.8.7
  • 1.8.6
  • 1.8.5
  • 1.8.4
  • 1.8.3
  • 1.8.2
  • 1.8.1
  • 1.8.0
  • 1.7.9
  • 1.7.8
  • 1.7.6
  • 1.7.5
  • 1.7.3
  • 1.7.2
  • 1.7.1
  • 1.7.0
  • 1.6.6
  • 1.6.5
  • 1.6.4
  • 1.6.2
  • 1.6.1
  • 1.6
  • 1.5

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins