Minimalist Audio Player Plugin For jQuery - jAudio

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.

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.

  • Publication date: 03.02.2018
  • Source