WFPlayer

WFPlayer.js is an audio waveform generator

Demo

Checkout the demo from Github Pages

Features

• Create waveforms without loading the entire media file
• Customize cursor, progress, grid, ruler display and color
• Support for loading media urls and loading media dom elements (video tags and audio tags)
• Support for real-time change options like color or width etc
• Listen to the playback state of media elements for playback animation
• Adaptive parent element size and audio data
• And more...

Install

Install with npm

$ npm install wfplayer

Or install with yarn

$ yarn add wfplayer

import WFPlayer from 'wfplayer';

Or umd builds are also available

<script src="path/to/wfplayer.js"></script>

Will expose the global variable to window.WFPlayer.

Usage

HTML

<div id="waveform" style="width: 1000px; height: 300px"></div>
<video id="video" src="path/to/video.mp4"></video>

<!-- or -->
<audio id="audio" src="path/to/audio.mp3"></audio>

JS

var wf = new WFPlayer({
    container: document.querySelector('#waveform'),
});

wf.load(document.querySelector('#video'));

// or
wf.load(document.querySelector('#audio'));

API

Options

var wf = new WFPlayer({
    // Mount the audio waveform of the dom
    container: '#waveform',

    // Media element like: video tag or audio tag
    mediaElement: null,

    // Whether to display wave
    wave: true,

    // Waveform color
    waveColor: 'rgba(255, 255, 255, 0.1)',

    // Background color
    backgroundColor: 'rgb(28, 32, 34)',

    // Whether to display cursor
    cursor: true,

    // Cursor color
    cursorColor: '#ff0000',

    // Whether to display progress
    progress: true,

    // progress color
    progressColor: 'rgba(255, 255, 255, 0.5)',

    // Whether to display grid
    grid: true,

    // Grid color
    gridColor: 'rgba(255, 255, 255, 0.05)',

    // Whether to display ruler
    ruler: true,

    // Ruler color
    rulerColor: 'rgba(255, 255, 255, 0.5)',

    // Whether to display ruler at the top
    rulerAtTop: true,

    // Indicates whether to do http fetching with cookies
    withCredentials: false,

    // Indicates whether to enable CORS for http fetching
    cors: false,

    // Initialize http headers
    headers: {},

    // Pixel ratio
    pixelRatio: window.devicePixelRatio,

    // Which audio channel to render
    channel: 0,

    // Duration of rendering
    duration: 10,

    // The ratio of spaces on both sides
    padding: 5,

    // Waveform height scale ratio
    waveScale: 0.8,
});

Instance methods and properties

Load target:

// The target can be the url address of media or a mediaElement
wf.load(target);

Change Channel:

wf.changeChannel(1);

Jump to a certain time:

wf.seek(second);

Export image:

wf.exportImage();

Modify option:

wf.setOptions({
    // Like change wave color
    waveColor: 'red',
});

Destroy instance:

wf.destroy();

Instance event

Example:

wf.on('decodeing', function(percentage) {
    console.log(percentage);
});

Class methods and properties

Get all instances:

WFPlayer.instances;

Get the version:

WFPlayer.version;

Get the env:

WFPlayer.env;

Donations

We accept donations through these channels:

• Paypal
• WeChat Pay
• Alipay

QQ Group

License

MIT © Harvey Zack