Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerosoler/waveform-path
🎙 Generator waveform paths for SVG 🎶
https://github.com/jerosoler/waveform-path
audio audio-player audio-visual audio-visualizer music path svg waveform webaudio
Last synced: about 2 months ago
JSON representation
🎙 Generator waveform paths for SVG 🎶
- Host: GitHub
- URL: https://github.com/jerosoler/waveform-path
- Owner: jerosoler
- License: mit
- Created: 2022-01-26T15:42:58.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-12T19:27:32.000Z (8 months ago)
- Last Synced: 2024-04-14T13:51:58.007Z (5 months ago)
- Topics: audio, audio-player, audio-visual, audio-visualizer, music, path, svg, waveform, webaudio
- Language: JavaScript
- Homepage: https://jerosoler.github.io/waveform-path/
- Size: 226 KB
- Stars: 67
- Watchers: 4
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-webaudio - waveform-path - Library to generate waveforms paths in svg. (Packages / Libraries)
README
[](https://www.npmjs.com/package/waveform-path)
[](https://github.com/jerosoler/waveform-path/blob/master/LICENSE)
[](https://twitter.com/jerosoler)
# waveform-path
[LIVE DEMO WITH EXAMPLES](https://jerosoler.github.io/waveform-path/)
Simple library to custom waveforms.
# Install
## NPM
```bash
npm install waveform-path -s
```
## Download
Download the last realease of repo and copy waveform-path.min.js from dist folder.
# How to use
```javascript
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");
```
## 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
```javascript
// 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
```javascript
// 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
```