Visualize Audio In Canvas Based Waveforms – WFPlayer

Category: Javascript , Recommended | October 18, 2019
Views Total:5,213 views
Official Page:Go to website
Last Update:October 18, 2019


Visualize Audio In Canvas Based Waveforms – WFPlayer


WFPlayer is an online audio waveform generator tool written in JavaScript and Canvas.

The library dynamically generates an animated, interactive, canvas-based waveform image from any Video or Audio files.

How to use it:

1. Install and import the WFPlayer package.

# Yarn
$ yarn add wfplayer
$ npm install wfplayer --save
import WFPlayer from 'wfplayer';

2. Or directly load the wfplayer.js in the document.

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

3. Create a container element to hold the generated audio waveform.

<div id="waveform"></div>

4. Embed audio or video into the document.

<video id="video" src="/path/to/video.mp4"></video>
<audio id="audio" src="/path/to/audio.mp3"></audio>

5. Initialize the library with default settings.

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

6. Load the audio or video you’d like to generate the audio waveform.


7. All default options to customize the waveform.

var wf = new WFPlayer({
    container: '#waveform',
    mediaElement: null, // e.g.  video or audio tag
    wave: true,
    waveColor: 'rgba(255, 255, 255, 0.1)',
    backgroundColor: 'rgb(28, 32, 34)',
    paddingColor: 'rgba(255, 255, 255, 0.05)',
    cursor: true,
    cursorColor: '#ff0000',
    progress: true,
    progressColor: 'rgba(255, 255, 255, 0.5)',
    grid: true,
    gridColor: 'rgba(255, 255, 255, 0.05)',
    ruler: true,
    rulerColor: 'rgba(255, 255, 255, 0.5)',
    rulerAtTop: true,
    withCredentials: false,
    cors: false, // enable CORS for http fetching
    headers: {}, // http headers
    channel: 0, //  audio channel to render
    duration: 10,
    padding: 5,
    waveScale: 0.8,
    pixelRatio: window.devicePixelRatio,

8. API methods.

// load an audio/video file
// go to a specific point;
// export waveform image
// update options
  // options here
// destroy the instance

9. Event handlers.

  • load: on load
  • click: on click
  • contextmenu: on right click
  • resize: on resize
  • playing: on playing
  • decodeing: on decoding
  • loadStart: start loading
  • loadEnd: after loaded
  • downloading: on download
  • audiobuffer: on buffer
  • channelData: channel data
wf.on('load', function() {
  // on file load

You Might Be Interested In:

One thought on “Visualize Audio In Canvas Based Waveforms – WFPlayer

Leave a Reply