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
   
Minimalist Audio Player Plugin For jQuery - jAudio

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.