Minimalist Audio Player Plugin For jQuery - jAudio
| File Size: | 320 KB |
|---|---|
| Views Total: | 2293 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jAudio is a small jQuery plugin which converts audio links into a minimal HTML5 audio player with play and pause controls.
How to use it:
1. Add audio links to the web page.
<a href="sound1.mp3">Sample Music One</a> <a href="sound2.mp3">Sample Music Two</a> <a href="sound3.mp3">Sample Music Three</a>
2. Add jQuery JavaScript library and the jAudio's script to the page.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="jquery.jAudio.js"></script>
3. The necessary CSS styles for the audio player.
a[class^='jAudioBtn'] {
display: inline-block;
width: 26px;
height: 26px;
text-decoration: none;
background: url('controls.png');
}
a.jAudioBtnPlay { background-position: top; }
a.jAudioBtnPause { background-position: bottom; }
4. Call the function on the audio links and done.
$(function(){
$('a').jAudio();
});
This awesome jQuery plugin is developed by buglessir. For more Advanced Usages, please check the demo page or visit the official website.











