High-performant waveform rendering component in webgl or canvas2d.
const createWaveform = ;let wf =;//update waveform data after 50ms;
const Waveform = require('gl-waveform')
Get waveform component class.
require('gl-waveform/2d') for canvas-2d version.
let waveform = new Waveform(options)
Create waveform instance based off options:
// Container to place waveform elementcontainer: documentbody// Webgl context, will be created by defaultcontext: null// Audio viewport paramsmaxDb: -0minDb: -100sampleRate: 44100// Zoom level, or how many data samples per pixelscale: 1// How many samples to skip from the left side of the buffer.//undefined offset will move window to the tail of data, negative - from the tail.offset: null// Place data in logarithmic fashion, which makes feeble data more contrastlog: true// Colormap for the datapalette: 'white' 'black'// Fill background with the colorbackground: null// Enable alpha to make transparent canvasalpha: false// Draw automatically every frame or only when data/options changesautostart: false// Worker mode, a bit heavy for main thread to sample huge waveformsworker: true// Pixel ratiopixelRatio: windowpixelRatio// Enable panning/zooming by dragging/scrollingpan: truezoom: true
Append new data to the waveform. Data is whether single sample or array/float array with values from
The visible waveform will be automatically rerendered in the next frame.
Using push is preferrable for dynamic waveform, when not all the samples are known, because it is highly optimized for large scale repaints.
Set new data for the waveform, discard existing data.
Force full-cycle rerendering.
Single draw pass, useful for cooperation with other components on a single canvas.
Drawing waveforms — some insights on the way to draw waveforms.