Minimal Custom HTML5 Audio Player Plugin For jQuery - AudioPlayer.js

AudioPlayer.js is an easy-to-customize jQuery plugin used to build a minimal HTML5 audio player for your MP3, MP4, Wav or Ogg files.

How to use it:

1. Load the default theme CSS in the head section of the html page.

<link rel="stylesheet" href="theme.default.css">

2. Load jQuery JavaScript library and the JavaScript file jQuery.AudioPlayer.js at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jQuery.AudioPlayer.js"></script>

3. Create a container where you want to place the audio player.

<div id="audioWrap"></div>

4. Initialize the Audio player and specify the audio file you want to play.

var player = $.AudioPlayer;
player.init({
  container: '#audioWrap',
  source: 'mov_bbb.mp4'
});

5. All customization options with default values.

// enable debug mode
debuggers: false, 

// where to place the audio player
container: 'body',

// path to the audio file
source: '', 

// path to the audio player images
imagePath: './image',  
 

// allows to seek and play certain regions of a file,
allowSeek: true, 
seekNum: 0, 

// callbacks
canplayCallback: null, 
playCallback: null,
pauseCallback: null,    
timeupdateCallback: null, 
endedCallback: null,
mutedCallback: null,
onloadstartCallback: null,
onwaitingCallback: null,

// default template
template: $('<div id="componentWrapper">' +
  '<audio id="audio-element" style="display: none;">Your Browser doesnt support Audio tag.</audio>' +
  '<div class="controls_toggle"><img src="" alt="controls_toggle" /></div>' +
  '<div class="player_mediaTime_current">00:00</div>' +
  '<div class="player_progress">' +
  '<div class="progress_bg"></div>' +
  '<div class="load_progress"></div>' +
  '<div class="play_progress"></div>' +
  '<div class="player_progress_tooltip">' +
  '<p></p>' +
  '</div>' +
  '</div>' +
  '<div class="player_mediaTime_total">00:00</div>' +
  '<div class="player_volume_wrapper">' +
  '<div class="player_volume"><img src="" alt="player_volume" /></div>' +
  '<div class="volume_seekbar">' +
  '<div class="volume_bg"></div>' +
  '<div class="volume_level"></div>' +
  '<div class="player_volume_tooltip">' +
  '<p></p>' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</div>')

6. Update the audio file:

player.updateSource({
  source: '...'
});

Change log:

2017-06-26

• Add onloadstartCallback function
• Add onwaitingCallback function

2017-01-06

• JS update

---

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