Clean Touch-friendly Audio Player With jQuery - AudioPlayer.js

File Size: 6.22 KB
Views Total: 29036
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Clean Touch-friendly Audio Player With jQuery - AudioPlayer.js

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.

<audio preload="auto" controls>
  <source src="sample.mp3">

<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.

<link rel="stylesheet" href="css/audioplayer.css">
<script src="" 
<script src="js/audioplayer.js"></script>

3. Call the plugin on the audio tag.

$(function() {

4. That's it. The result html:

<div class="audioplayer">
  <audio preload="auto" controls style="width: 0px; height: 0px; visibility: hidden;">
    <source src="example.mp3">
  <div class="audioplayer-playpause" title=""><a href="#"></a></div>
  <div class="audioplayer-time audioplayer-time-current">00:00</div>
  <div class="audioplayer-bar">
    <div class="audioplayer-bar-loaded" style="width: 100%;"></div>
    <div class="audioplayer-bar-played"></div>
  <div class="audioplayer-time audioplayer-time-duration">00:56</div>
  <div class="audioplayer-volume">
    <div class="audioplayer-volume-button" title=""><a href="#"></a></div>
    <div class="audioplayer-volume-adjust">
        <div style="width: 100%;"></div>

5. Possible plugin options.

  classPrefix: 'audioplayer',
  strPlay: '',
  strPause: '',
  strVolume: ''

This awesome jQuery plugin is developed by xiaochunjimmy. For more Advanced Usages, please check the demo page or visit the official website.