Simple library to custom waveforms.
npm install waveform-path -sDownload the last realease of repo and copy waveform-path.es.js from dist folder.
<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>| 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 |
// 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| 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 |
// 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