Skip to main content

Drawing waveforms

The library gives you numbers; you choose how to draw them.

Views​

A row of Views is the simplest option and fine for a few dozen bars:

{bars.map((value, index) => (
  <View key={index} style={{ width: 3, height: Math.max(2, value * 40), borderRadius: 1.5 }} />
))}

Use fitBars to fill a width: fitBars(width, 3, 2) returns how many 3-pixel bars with 2-pixel gaps fit.

SVG or Skia​

For hundreds of bars, draw one path. waveformPath returns SVG path data for react-native-svg or Skia:

import Svg, { Path } from 'react-native-svg';
import { normalize, resample, waveformPath } from 'react-native-audio-analyzer';

const d = waveformPath(normalize(resample(peaks, 160)), { width: 320, height: 48, gap: 1 });

<Svg width={320} height={48}>
  <Path d={d} fill="#5B4CF0" />
</Svg>;
// Skia
const path = Skia.Path.MakeFromSVGString(d);

Every picture on this site is a waveformPath result.

Asymmetric envelope​

resampleMinMax keeps the signed minimum and maximum under every bar — the classic look of an audio editor:

import { normalizeMinMax, resampleMinMax, waveformPath } from 'react-native-audio-analyzer';

const envelope = normalizeMinMax(resampleMinMax(peaks, 360));
const d = waveformPath(envelope, { width: 720, height: 64, gap: 0 });
normalizeMinMax(resampleMinMax(peaks, 360))

Area instead of bars​

waveformPath(values, { width, height, style: 'area' });