search

jerosoler / waveform-path

🎙 Generator waveform paths for SVG 🎶
https://jerosoler.github.io/waveform-path/
MIT License
83 stars 6 forks source link
audio audio-player audio-visual audio-visualizer music path svg waveform webaudio

readme

npm npm bundle size GitHub license Twitter URL

waveform-path

Logo

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.es.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