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

Category: Javascript | February 12, 2019
Author: greghub
Views Total: 108
Official Page: Go to website
Last Update: February 12, 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:

02/12/2019

  • Added touch support

You Might Be Interested In:


Leave a Reply