Jabradoodle is a jQuery Audio Button (+ 🐩 ) that makes playing MP3s a walk in the dog park. You get a Play/Pause button with builtin progress bar. Optionally, you can customize the icons and status text on instantiation and the design with CSS.
Be sure to include both the CSS and Javascript file in your project. The Javascript should come after your jQuery reference.
<link rel="stylesheet" href="jabradoodle.css">
<script src="jquery.js"></script>
<script src="jabradoodle.js"></script>
The player's configurable options may be set on instantiation with JavaScript or with data attributes in the markup.
In all cases, you must specify a path to an MP3 and the duration of that MP3 in seconds.
// Set options with data attributes and cal
<div class="audio" data-duration="72" data-src="heartstrings.mp3"> data-showprogressbar="false" </div>
$('.audio').jabradoodle();
// Set options in JavaScript
<div class="audio"></div>
$('.audio').jabradoodle({
src: 'heartstrings.mp3',
duration: 72,
showprogressbar: false
});
// Mix and match. Useful with many players that share common settings but different sources and durations.
<div class="audio" data-duration="72" data-src="heartstrings.mp3"></div>
$('.audio').jabradoodle({
showprogressbar: false
});
preload: false, // create audio element on init and start download, or wait until button click.exclusive: true, // play only one player at a time
fillcontainer: false, // whether or not the button expands as wide as the container it's in (display block vs display table)
showduration: true, // show duration in MM:SS format
showprogressbar: true, // show the moving progress bar in the background
countdown: false, // duration counts down as time updates
iconsmaintainwidth: true,
buttonmaintainwidth: true,
statusmaintainwidth: false,
playtext: 'Play',
pausetext: 'Pause',
resumetext: 'Resume',
playicon: PLAYICON, // passing in svg icons. You can pass in any markup.
pauseicon: PAUSEICON,
resumeicon: PLAYICON
The default state includes Play/Pause icons and Play/Pause/Resume status text.
// html
<div class="audio" data-duration="72" data-src="heartstrings.mp3"></div>
// js
$('.audio').jabradoodle();
Use different status text
// html
<div class="audio" data-duration="109" data-playtext="Play Newscast" data-pausetext="Pause Newscast" data-resumetext="Resume Newscast" data-src=newscast.mp3"></div>
// js
$('.audio').jabradoodle();
All the text bringing you down? Just pass in empty values.
// html
<div class="audio" data-duration="109" data-playtext="" data-pausetext="" data-resumetext="" data-src=motorcity.mp3"></div>
// js
$('.audio').jabradoodle();
Eliminate the moving progress bar.
// html
<div class="audio" data-duration="31" data-showprogressbar="false" data-src="popnugget.mp3"></div>
// js
$('.audio').jabradoodle();
Eliminate the loading icon that shows up while the audio loads..
// html
<div class="audio" data-duration="31" data-showloader="false" data-src="popnugget.mp3"></div>
// js
$('.audio').jabradoodle();
// html
<div class="audio" data-duration="31" data-countdown="true" data-src="motorcity.mp3"></div>
// js
$('.audio').jabradoodle();
It's all CSS under the hood.
// html
<div class="audio" data-duration="72" data-src="heartstrings.mp3"></div>
// css
.jab-container{
background-color: #eaf2f9;
color: rgba(79, 124, 158, 0.65);
}
.jab-container:hover{
color: rgba(79, 124, 158, 1);
}
.jab-container.jab-state-loading{
color: rgba(79, 124, 158, 0.25);
background-color: rgba(243,242,249,0.8);
cursor: auto;
}
.jab-bar{
background-color: #dae6ef;
}
.jab-loader{
border-color: #4f7c9e; /* background */
border-left-color: #fff; /* foreground */
}
// js
$('.audio').jabradoodle();
Jabradoodle is by Josh Williams.
Jabradoodle is licensed under the MIT license