Minimalist Audio Player Plugin For jQuery - jAudio
File Size: | 320 KB |
---|---|
Views Total: | 2248 |
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.