Never-ending Pumpkin Mulch

    @10up/component-audio

    0.4.0 • Public • Published

    NOTE: This is a very initial pass. Recommend waiting on first usage until fully tested. Updates coming shortly.

    10up Audio component

    Support Level License: MIT Build Status

    Installation

    NPM

    npm install --save @10up/component-audio

    Standalone

    Clone this repo and import audio.js and audio.css from the dist/ directory.

    Methods

    The following lists the latest supported callbacks. Each callback receives an instance of the player.

    onplay

    Fires when the audio has been started or is no longer paused

    onplay: (playerInstance) => {}

    onpause

    Fires when the audio/video has been paused

    onpause: (playerInstance) => {}

    onerror

    Fires when an error occurred during the loading of an audio

    onerror: (playerInstance) => {}

    onloadstart

    Fires when the browser starts looking for the audio

    onloadstart: (playerInstance) => {}

    onended

    Fires when the current playlist is ended

    onended: (playerInstance) => {}

    onplaying

    Fires when the audio is playing after having been paused or stopped for buffering

    onplaying: (playerInstance) => {}

    onprogress

    Fires when the browser is downloading the audio

    onprogress: (playerInstance) => {}

    onseeking

    Fires when the user starts moving/skipping to a new position in the audio

    onseeking: (playerInstance) => {}

    onseeked

    Fires when the user is finished moving/skipping to a new position in the audio

    onseeked: (playerInstance) => {}

    ontimeupdate

    Fires when the current playback position has changed

    ontimeupdate: (playerInstance) => {}

    onvolumechange

    Fires when the volume has been changed

    onvolumechange: (playerInstance) => {}

    Properties

    The following is a list of optional properties, their types and usages.

    Property Default value Type Usage
    playLabel Play String Label for the play button
    playLabel Stop String Label for the stop button
    stopLabel Stop String Label for the pause button
    pauseLabel Pause String Label for the mute button
    muteLabel Mute String Label for the mute button
    volumeLabel Volume String Label for the volume slider
    scrubberLabel Scrub Timeline String Label for the scrubber slider
    currentTimeLabel Total Time String Label for the total time
    showMute true Boolean Maybe show the mute button
    showStop true Boolean Maybe show the stop button
    showTimer true Boolean Maybe show the timer control
    showVolume true Boolean Maybe show the volume slider
    showScrubber true Boolean Maybe show the scrubber control
    localStorage true Boolean Maybe enable localStorage. This allows a user to reload the page, and pickup where they last left off.
    debug true Boolean Maybe turn on debug mode. Debug mode outputs helpful information in the console window of the browser.

    Usage

    This is the markup template expected by the component. Use an HTML audio player, wrapped with an element containing a class. Here we use a div with a class of 'audio'.

    Markup

    <div class="audio">
       <audio controls>
       	<source src="path/to/audio-file.mp3" type="audio/mpeg">
       	Your browser does not support the audio element.
       </audio>
    </div> <!-- //.audio -->

    JavaScript

    Create a new instance by supplying the selector to use for the audio and an object containing any necessary callback functions.

    import Audio from '@10up/component-audio';
    
    const audioInstance = new Audio( '.audio', { ...options } );

    CSS

    Coming soon

    Demo

    Coming soon

    Tests

    Coming soon

    Support Level

    Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

    Like what you see?

    Keywords

    none

    Install

    npm i @10up/component-audio

    DownloadsWeekly Downloads

    11

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    6.56 MB

    Total Files

    16

    Last publish

    Collaborators

    • fabiankaegy
    • brandwaffle
    • eugene-manuilov
    • christianc1
    • nicholasio
    • joesnellpdx
    • tlovett1
    • devinle