waveform-path

LIVE DEMO WITH EXAMPLES

Simple library to custom waveforms.

Install

NPM

npm install waveform-path -s

Download

Download the last realease of repo and copy waveform-path.min.js from dist folder.

How to use

<script type="module">
    import { getAudioData, linearPath, polarPath } from "waveform-path";

    async function AudioPath(file) {
        const audioData = await getAudioData(file);

        const pathLogo = linearPath(audioData,{ samples: 100,  type: 'steps', top: 20 });
        document.querySelector("#logo path").setAttribute('d', pathLogo);

    }
    AudioPath("hello_world.ogg");
</script>

Linear Options

Option | Default | Description --- | --- | --- channel | 0 | Channel audio for generate wave samples | length | Length of the data height | 100 | Height of path width | 800 | Width of path top | 0 | Top margin from path to svg left | 0 | Left margin from path to svg type | 'steps' | 'steps', 'mirror' or 'bars' paths | [{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}] | Array of commands to create the path. animation | false | To create animations, paths separated by commas animationframes | 10 | Frames per second of the animation normalize | true | Normalize audio to adjust waveform

Linear Path Options

// Lineto
{d:'L', sx: 0, sy:0, ex:50, ey:100 }

// Horitzontal
{d:'H', sx:10, y:90, ex:90}

// Vertical
{d:'V', sy:0, x:0, ey:100}

// Cubic Bézier Curve - Not 100%
{d:'C', sx: 0, sy:0, x: 100, y: 100, ex:100, ey:0 },

// Quadratic Bézier Curve
{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}

// Arc
{d:'A', sx: 0, sy:100,  ex:100, ey:100, rx:10, ry: 10, angle: 180, arc: 1, sweep: 1}

// Z - Close Path no parameters
{d:'Z'}

sx = start % x position
x = center % x position
ex = end % x position

sy = start % y position
y = center % y position
ey = end % y position

These three extra options can be added:
minshow: 0.2  // Values 0 to 1 - Default 0
maxshow: 1 // Values 0 to 1 - Default 1
normalize: true // Normalize value y to 1. - Default false
Example: 
{d:'H', sx:10, y:90, ex:90, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y > 0.4 && y < 0.6

For arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve

Polar Options

Option | Default | Description --- | --- | --- channel | 0 | Channel audio for generate wave samples | length | Length of the data distance | 50 | Distance from center length | 100 | Length of wave top | 0 | Top margin from path to svg left | 0 | Left margin from path to svg type | 'steps' | 'steps', 'mirror' or 'bars' startdeg | 0 | Where do you start drawing. To make it natural, 0 is equivalent to north. enddeg | 360 | Where do you end drawing invertdeg | false | Reverse the direction of the degrees invertpath | false | Reverse the path vertically paths | [{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}] | Array of commands to create the path. animation | false | To create animations, paths separated by commas animationframes | 10 | Frames per second of the animation normalize | true | Normalize audio to adjust waveform

Polar Path Options

// Lineto
{d:'L', sdeg:0, sr:0,  edeg:100, er:100 },

// Cubic Bézier Curve - Not 100%
{d:'C', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}

// Quadratic Bézier Curve
{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}

// Arc
{d:'A', sdeg:80, sr:0, edeg: 0, er:0, rx: 100, ry: 100, angle: 100, arc: 0, sweep: 1 },

// Z - Close Path no parameters
{d:'Z'}

sdeg = start % deg position
deg = center % deg position
edeg = end % deg position

sr = start % radius position
r = center % radius position
er = end % radius position

These three extra options can be added:
minshow: 0.2  // Values 0 to 1 - Default 0
maxshow: 1 // Values 0 to 1 - Default 1
normalize: true // Normalize value radius to 1. - Default false
Example: 
{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y > 0.4 && y < 0.6

For arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve