green-audio-player

    1.1.2 • Public • Published

    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
    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:

    <div class="player-1 player-accessible">
    ...
    </div>

    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

    Install

    npm i green-audio-player

    DownloadsWeekly Downloads

    181

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    4.08 MB

    Total Files

    21

    Last publish

    Collaborators

    • greghvns