Skip to content
Audio Player javascript library
JavaScript CSS
Branch: master
Clone or download

README.md

Green Audio Player

npm GitHub GitHub file size in bytes GitHub last commit

Based on a pen I've created 2 years ago. Due to requests from many people I decided to create a repository, containing an improved version of the Green Audio Player including the support for multiple audio players on a single page.

Online demo

Green Audio Player

Installation

Github

Download repository ZIP.

CDN

Alternatively, you can load it from CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/css/green-audio-player.min.css">
<script src="https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/js/green-audio-player.min.js"></script>

NPM

npm i green-audio-player

Usage

Include the green-audio-player.css or green-audio-player.min.css file:

<link rel="stylesheet" type="text/css" href="{path}/dist/css/green-audio-player.min.css">

and green-audio-player.js file (or green-audio-player.min.js):

<script src="{path}/dist/js/green-audio-player.js"></script>

Add the audio tag inside of a container. You are free to add any attributes. Green Audio Player does not change the audio tag, so for example if you want the audio to loop, you can add the loop attribute to the audio tag.

<div class="gap-example">
    <audio>
        <source src="audio/example-1.mp3" type="audio/mpeg">
    </audio>
</div>

This will initialize the Green Audio Player

new GreenAudioPlayer('.gap-example');

You can add multiple players on a single page.

There's a shorter method for initializing several Green Audio Players:

GreenAudioPlayer.init({
    selector: '.player', // inits Green Audio Player on each audio container that has class "player"
    stopOthersOnPlay: true
});

Refer to /examples folder for demos of single and multiple players.

Options

Option Description Values Default
stopOthersOnPlay Whether other audio players shall get paused when hitting play true, false false
showDownloadButton Allow audio file download. Displays the download button. true, false false
You can’t perform that action at this time.