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

Category: Javascript | March 25, 2020
Author: greghub
Views Total: 10,869 views
Official Page: Go to website
Last Update: March 25, 2020
License:

Preview:

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

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

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

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

      Reply
      1. notYerMom

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

        Reply
  2. San Bo

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

    Any idea?

    Reply
  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?

    Reply

Leave a Reply