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

Preview:

Description:

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">
  </audio>
</div>

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
});

Changelog:

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

04/18/2019

• Update direction aware conditions

04/15/2019

• Refactor and hide volume controls on iOS

04/12/2019

• Fix problem when no options passed

03/07/2019

• Fix exporting issue

02/12/2019

• Added touch support