Need help with green-audio-player?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

greghub
189 Stars 49 Forks MIT License 63 Commits 25 Opened issues

Description

Audio Player javascript library

Services available

!
?

Need anything else?

Contributors list

# 19,009
TypeScr...
CSS
chart-l...
Vue.js
47 commits
# 197,921
html5-v...
C
Shell
flash
4 commits

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:


NPM

npm i green-audio-player

Usage

Include the

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

and

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

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.

This will initialize the Green Audio Player

javascript
new GreenAudioPlayer('.gap-example');

You can add multiple players on a single page.

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

js
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
| enableKeystrokes | Players have keystrokes associated with functions. |
true
,
false
|
false
| showTooltips | Labels for play, volume and download buttons visible on focus |
true
,
false
|
false

The tooltip option requires setting

showTooltips
to true on your player.

Accessibility

In order to improve accessibility, keyboard navigation can be enabled, by passing the

enableKeystrokes
option. By default, the outline is disabled on elements. If you want to add outline to elements add
player-accessible
class to the player element:
...

You can focus on elements with Tab key and use the following keys to use the player controls.

| Key | Action | |--------|-------------| | Tab | Focus on the next element | | Shift + Tab | Focus on the previous element | | Enter or Spacebar | Pause/Play | | Right Arrow | Fast-forward | | Left Arrow | Rewind | | Enter or Spacebar | Show/hide volume slider | | Up Arrow | Increase volume | | Down Arrow | Decrease volume | | Enter | Download |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.