This time I will share jQuery Plugin and tutorial about Clean Touch-friendly Audio Player With jQuery – AudioPlayer.js, hope it will help you in programming stack.
A lightweight and dead simple jQuery library to create minimal, clean, responsive, touch-friendly audio players from HTML5 <audio> tag.
This is a redesign version of the Responsive & Touch-Friendly jQuery Audio Player Plugin.
How to use it:
1. Embed an HTML5 auido file into the webpage.
1 |
<audio preload="auto" controls> |
2 |
<source src="sample.mp3"> |
5 |
<audio src="audio.wav" preload="auto" controls autoplay loop></audio> |
2. Import jQuery library and the jQuery AudioPlayer.js plugin’s files into the page.
1 |
<link rel="stylesheet" href="css/audioplayer.css"> |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"> |
6 |
<script src="js/audioplayer.js"></script> |
3. Call the plugin on the audio tag.
2 |
$('audio').audioPlayer(); |
4. That’s it. The result html:
01 |
<div class="audioplayer"> |
02 |
<audio preload="auto" controls style="width: 0px; height: 0px; visibility: hidden;"> |
03 |
<source src="example.mp3"> |
05 |
<div class="audioplayer-playpause" title=""><a href="#"></a></div> |
06 |
<div class="audioplayer-time audioplayer-time-current">00:00</div> |
07 |
<div class="audioplayer-bar"> |
08 |
<div class="audioplayer-bar-loaded" style="width: 100%;"></div> |
09 |
<div class="audioplayer-bar-played"></div> |
11 |
<div class="audioplayer-time audioplayer-time-duration">00:56</div> |
12 |
<div class="audioplayer-volume"> |
13 |
<div class="audioplayer-volume-button" title=""><a href="#"></a></div> |
14 |
<div class="audioplayer-volume-adjust"> |
16 |
<div style="width: 100%;"></div> |
5. Possible plugin options.
1 |
$('audio').audioPlayer({ |
2 |
classPrefix: 'audioplayer', |
This awesome jQuery plugin is developed by xiaochunjimmy. For more Advanced Usages, please check the demo page or visit the official website.
