Minimal Clean HTML5 Audio Player With Custom Controls – Green Audio Player

Category: Javascript | March 25, 2020
Views Total:28,824 views
Official Page:Go to website
Last Update:March 25, 2020


Minimal Clean HTML5 Audio Player With Custom Controls – Green Audio Player


The Green Audio Player JavaScript library lets you create minimal clean accessible HTML5 audio players with custom controls in the web app.

How to use it:

Load the main JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="dist/css/main.min.css">
<script src="dist/js/app.js"></script>

Wrap the audio element into a DIV container.

<div class="example">
  <audio crossorigin>
    <source src="1.mp3" type="audio/mpeg">

Initialize the audio play by calling the function on the container element. Done.

document.addEventListener('DOMContentLoaded', function() {
  new GreenAudioPlayer('.example');

You can customize the audio controls by overriding the default variables in the _variables.scss.

$shadow-light: rgba(0, 0, 0, .07);
$shadow-medium: rgba(0, 0, 0, 0.32);
$shadow-dark: rgba(0, 0, 0, 0.62);
$white: #fff;
$primary: #44bfa3;
$light-gray: #b0b0b0;
$lighter-gray: #d8d8d8;
$text: #55606e;

Possible options which can be used to initialize multiple audio players on the page.

new GreenAudioPlayer('.example',{
    selector: '.player',
    stopOthersOnPlay: true

Enable keyboard interactions for better accessibility.

new GreenAudioPlayer('.example',{
    enableKeystrokes: true


v1.1.2 (03/25/2020)

  • Added Key Up function

v1.1.1 (03/17/2020)

  • Keyboard access minor fix

v1.1.0 (03/15/2020)

  • Autoplay & Preload support improved

v1.1.0 (03/15/2020)

  • Integrated Accessibility Features

v1.0.14 (02/26/2020)

  • Update icon on autoplay

v1.0.12 (09/16/2019)

  • Update version, packages and fix vulnerabilities

v1.0.11 (07/31/2019)

  • Add option to easily init multiple players

v1.0.10 (06/10/2019)

  • Improve slider usability for mobile

v1.0.9 (05/08/2019)

  • Improve IE11 compatibility


  • Update direction aware conditions


  • Refactor and hide volume controls on iOS


  • Fix problem when no options passed


  • Fix exporting issue


  • Added touch support

You Might Be Interested In:

8 thoughts on “Minimal Clean HTML5 Audio Player With Custom Controls – Green Audio Player

  1. rian rismawati

    If use dynamic data, what should I do? I tried foreach on php but only one audio appeared.

    Please help..
    Thankyou in advance

    1. DamGuy

      Same here, im unable to make it autoplay.. I hope the author can make a quick revision.
      i also want it to automatically play on page load.

      1. notYerMom

        Pretty sure that’s disabled by most browsers to prevent horrible ads from autoplaying

  2. San Bo

    Does not work on iPad (maybe general iOS): there is always the spinner instead play button.

    Any idea?

  3. Bernard Rondelez

    I would like to use this player for playing a webstream. Is there an option to hide the progress bar and the total time?


Leave a Reply