Customizable HTML5 Mini Audio Player jQuery Plugin

Pupunzi May 27, 2023

customizable-html5-mini-audio-player-jquery-plugin

HTML5 Audio Player with Customization An audio link can be transformed into a stylish and customizable HTML5 audio player with the help of the jQuery plugin. This plugin can be used to create a minimalist audio player that can be easily customised with skins, colours, and other settings to match the aesthetic of any website. You can easily add an audio player to your webpage using this plugin without having to write complex HTML or CSS code.
Some plugins also include playlist support, cross-browser compatibility, and responsive design. Whether you want to make a simple audio player for your website or a more advanced player with extra features, a jQuery plugin can help simplify the process and offer a variety of customization options to meet your needs.

Plugin Features

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

Plugin Implementation

Load the required libraries in your HTML.

Follow these steps to create an audio link on a webpage and configure the audio player with a jQuery plugin.


   Audio Title

Initialize the plugin on the audio link.

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

All possible plugin options to customize the audio player.

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

$(".dsAudio").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
}