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

Category: Javascript | June 10, 2019
Author: greghub
Views Total: 784
Official Page: Go to website
Last Update: June 10, 2019
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 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;

Changelog:

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:


2 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

Leave a Reply