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

Category: Javascript | March 25, 2020
Author: greghub
Views Total: 7,756 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:

6 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


Leave a Reply